canvas图片合成

最新推荐文章于 2023-10-31 15:01:21 发布

人可如月

最新推荐文章于 2023-10-31 15:01:21 发布

阅读量240

点赞数

文章标签： canvas 合成图片

本文链接：https://blog.csdn.net/small_cutey/article/details/88634379

版权

本地上传图片或者后台返回图片，用canva合成例子

<body>
<img id="base64" />
<input id="file" type="file" name="" />
<canvas id="canvas2" width="800" height="500"></canvas>
<script>
document.querySelector("#file").addEventListener("change", function() {
console.log(document.querySelector("#file").value);
var file = this.files[0];
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var reader = new FileReader();
var image = new Image();
reader.onload = function(event) {
image.src = event.target.result;
};
reader.onloadend = function(e) {
image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(0, 0);
console.log(
image.width,
image.height,
image.naturalWidth,
image.naturalHeight
);
var imgnaturalWidth = image.naturalWidth;
var imgnaturalHeight = image.naturalHeight;
ctx.save();
image.width = imgnaturalWidth * 1;
image.height = imgnaturalHeight * 1;
var xpos = 0;
var ypos = 0;
ctx.drawImage(
image,
xpos - ypos,
xpos - ypos,
image.width,
image.height
);
ctx.restore();
var base64 = canvas.toDataURL();
document.querySelector("#base64").setAttribute('src',base64);
console.log(base64);
};
};
reader.readAsDataURL(file);
});
</script>
</body>