html5 добавить несколько холстов... использовать appendchild
Я хочу добавить несколько холстов, но у меня постоянно возникают ошибки..... Я хочу добавить изображение холста, оно должно быть добавлено линейно в одном теге, потому что я должен установить фиксированный каркас, который имеет размер A4.
и я должен использовать appendchild..... вот мой код... пожалуйста, мне нужна помощь.... пожалуйста...... пожалуйста....
<script type = "text/javascript" charset = "utf-8" ></script>
var origin_canvas = document.getElementById('original_img');
var original_context = origin_canvas.getContext('2d');
var fileopen = document.getElementById('fileopen');
var add_img = document.getElementById('filter');
var div_filed = document.getElementById('canvas_pack');
var canvasElements = new Array();
var c_context = new Array();
// i want to add multiple canvas and canvas_filed
for(var i = 0; i<100; i++){
canvasElements = document.createElement("canvas");
div_Filed.appendChild(canvasElements);
c_context.push(canvasElements.getContext('2d'));
}
add_img.onclick = function (event) {
drawImage(origin_canvas);
}
fileopen.onchange = function (event) {
console.log(this.value);
/* Loading */
var tgt = event.target || window.event.srcElement;
var files = tgt.files;
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
var image_load_tag = new Image();
image_load_tag.onload = function () {
drawImage(image_load_tag);
}
fr.onload = function () {
image_load_tag.src = fr.result;
}
fr.readAsDataURL(files[0]);
delete image_load_tag;
delete fr;
}
else {}
}
function drawImage(imageObj) {
console.log('drawImage');
origin_canvas.width = imageObj.width;
origin_canvas.height = imageObj.height;
original_context.drawImage(imageObj, 0, 0);
} <html>
<head>
<title>add multiple canvas </title>
</head>
<style>
.div-a{
display: inline-block;
width: 210mm;
height: 297mm;
}
</style>
<body>
<div class = div-a id = "canvas_pack">
<canvas id = "original_img></canvas>
// this location is where the canvas has to be added ....
</div>