使用图片,无法使用本地图片和网络地址,需要请求同一服务器下的地址,或后端处理图片跨域问题
vue做法
<template>
<div>
<canvas id="thecanvas" style="border: 1px solid #fff123"></canvas>
<el-button @click="downIamge">下载</el-button>
<img id="avatar" :src="img11" alt="" />
</div>
</template>
<script>
export default {
data() {
return {
img11: "",
};
},
created() {},
mounted() {
this.$nextTick(() => {
this.drawAndShareImage();
});
},
methods: {
// 图片地址和图片名称
downIamge(imgsrc, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/jpg");
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = '111';
a.href = url;
a.dispatchEvent(event);
};
image.src = this.img11;
},
drawAndShareImage() {
const that = this;
var canvas = document.getElementById("thecanvas");
canvas.width = 700;
canvas.height = 700;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
console.log("触发了");
var myImage = new Image();
myImage.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
myImage.src = "http://localhost:3000/1.jpg" //解决缓存引起访问失败需要添加时间戳。。。。。问题的关键点
// "https://pic2.zhimg.com/v2-3f3533b2e479e2a17cc96654024a8b41_r.jpg"; //背景图片 你自己本地的图片或者在线图片
myImage.onload = function () {
console.log("myImage onload方法");
context.drawImage(myImage, 0, 0, 700, 700);
context.font = "60px Courier New";
context.fillText("我是文字", 50, 50);
var myImage2 = new Image();
myImage2.src = "http://localhost:3000/2.jpg"; //你自己本地的图片或者在线图片
myImage2.setAttribute("crossOrigin", "Anonymous");
myImage2.onload = function () {
console.log("myImage2 onload方法");
context.drawImage(myImage2, 150, 150, 200, 200);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
console.log(base64);
that.img11 = base64;
// var img = document.getElementById("avatar");
// document.getElementById("avatar").src = base64;
// img.setAttribute("src", base64);
};
};
console.log("结束了");
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="avatar" src="" alt="">
<canvas id="thecanvas" width="700" height="700" style="border: 1px solid #fff123"></canvas>
<button id="downloadImageBtn">Download Image</button>
<script>
drawAndShareImage()
var canvas = document.getElementById('thecanvas')
document.getElementById('downloadImageBtn').addEventListener('click',() => {
var img = convertCanvasToImage(canvas)
console.log(img)
})
function convertCanvasToImage(canvas) {
var image = new Image();
image.setAttribute("crossOrigin",'anonymous');
image.src = canvas.toDataURL("image/png");
return image;
}
function drawAndShareImage() {
var canvas = document.getElementById("thecanvas");
// canvas.width = 700;
// canvas.height = 700;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.src = "http://localhost:3000/1.jpg" //背景图片 你自己本地的图片或者在线图片
myImage.setAttribute("crossOrigin",'anonymous');
myImage.onload = function () {
context.drawImage(myImage, 0, 0, 700, 700);
context.font = "60px Courier New";
context.fillText("我是文字", 50, 50);
var myImage2 = new Image();
myImage2.src = "http://localhost:3000/2.jpg" //你自己本地的图片或者在线图片
myImage2.setAttribute("crossOrigin", 'Anonymous');
myImage2.onload = function () {
context.drawImage(myImage2, 150, 150, 200, 200);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById('avatar');
document.getElementById('avatar').src = base64;
img.setAttribute('src', base64);
}
}
}
</script>
</body>
</html>