var canvas = document.querySelector('#canvas');
var buttons = document.querySelectorAll('button');
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var img = document.getElementById("img");
img.onload = function() {
ctx.drawImage(img, 0, 0)
}
img.setAttribute("crossOrigin", 'Anonymous')
// let img1 = new Image();
// img1.src = document.getElementById("image1").src;
// img1.onload = function() {
// ctx.drawImage(img1, 0, 0)
// }
var imgUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c29a56fd0c5032f875a9449c65a9.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660351351&t=97a8857b561fe49b0a780a4ebe15be55'
var img = document.getElementById("img");
// img.onload = function() {
// ctx.drawImage(img, 0, 0)
// }
function downloadIamge(downUrl, name = new Date().valueOf()) { //下载地址和名字（时间戳）
console.log('下载：', downUrl)
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, 300, 300);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = downUrl;
}
beginDraw = function() {
if (buttons[0].style.backgroundColor === 'red') {
buttons[0].style.backgroundColor = '';
canvas.removeEventListener('mousedown', star);
} else {
buttons[0].style.backgroundColor = 'red';
canvas.addEventListener('mousedown', star);
}
}
bianhong = function() {
if (buttons[1].style.backgroundColor === 'red') {
buttons[1].style.backgroundColor = '';
ctx.strokeStyle = '#000000'
} else {
buttons[1].style.backgroundColor = 'red';
ctx.strokeStyle = 'red'
}
}
bianlan = function() {
if (buttons[2].style.backgroundColor === "blue") {
buttons[2].style.backgroundColor = '';
ctx.strokeStyle = '#000000'
} else {
buttons[2].style.backgroundColor = 'blue';
ctx.strokeStyle = 'blue'
}
}
canvas.onmouseup = function(e) {
canvas.removeEventListener('mouseleave', leave);
canvas.removeEventListener('mousemove', draw);
}
function star(e) {
ctx.beginPath()
ctx.lineWidth = '8.0'
ctx.lineJoin = 'round'
ctx.lineCap = 'round'
const {
offsetX: starX,
offsetY: starY,
} = e
ctx.moveTo(starX, starY);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseleave', leave);
}
function leave() {
canvas.removeEventListener('mouseleave', leave);
canvas.removeEventListener('mousemove', draw);
}
function draw(e) {
const {
offsetX: curX,
offsetY: curY,
} = e
ctx.lineTo(curX, curY)
ctx.stroke()
}
submitCanvas = function() {
var img = document.querySelector('img');
img.src = canvas.toDataURL('image/png');
img = null
}
// function btnUploadFile(e, type) {
// var files = e.target.files;
// var file = files[0];
// if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) {
// return;
// }
// var reader = new FileReader();
// reader.onload = function() {
// var result = this.result;
// var img = new Image()
// img.src = result;
// var canvas = document.getElementById("canvas");
// var context = canvas.getContext("2d");
// //console.log(result)
// img.onload = function() {
// context.drawImage(img, 0, 0, 300, 300);
// }
// };
// reader.readAsDataURL(file);
// }
// window.onload = function() {
// var canvas = document.getElementById("canvas");
// var context = canvas.getContext("2d");
// paint(context);
// }
// function paint(context) {
// var temp = false;
// $("canvas").mousedown(function(event) {
// temp = true;
// var x = e.pageX - 8;
// var y = e.pageY - 8;
// context.moveTo(x, y);
// })
// $("canvas").mousemove(function(e) {
// var x = e.pageX - 8;
// var y = e.pageY - 8;
// //$("#info").html("( "+x+" , "+y+" )");
// if (temp) {
// context.lineTo(x, y);
// context.stroke();
// } else {
// context.beginPath()
// }
// })
// $("canvas").mouseup(function(e) {
// temp = false;
// })
// }
download = function() {
var can = document.getElementById("canvas"); // 获取canvas元素
var cxt = can.getContext("2d"); // 创建context对象
// 以上获得一个canvas图形
// 接下来将canvas转换成base64的url
var url = can.toDataURL("image/png"); // 该方法获得的base64和上面提到echarts的API得到的一样
// 注意该方法属于canvas元素，而不是创建的context对象
var arr = url.split(","),
mime = arr[0].match(/:(.*?);/)[1], // 此处得到的为文件类型
bstr = atob(arr[1]), // 此处将base64解码
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
var file = new File([u8arr], "filename", {
type: mime
});
var aDom = document.createElement("a"); // 创建一个 a 标签
aDom.download = file.name; // 设置文件名
let href = URL.createObjectURL(file); // 将file对象转成 UTF-16 字符串
aDom.href = href; // 放入href
document.body.appendChild(aDom); // 将a标签插入 body
aDom.click(); // 触发 a 标签的点击
document.body.removeChild(aDom); // 移除刚才插入的 a 标签
URL.revokeObjectURL(href); // 释放刚才生成的 UTF-16 字符串
}
// const gCanvas = document.querySelector('#canvas');
// function onSave() {
// gCanvas.toBlob((blob) => {
// const timestamp = Date.now().toString();
// const a = document.createElement('a');
// document.body.append(a);
// a.download = `${timestamp}.png`;
// a.href = URL.createObjectURL(blob);
// a.click();
// a.remove();
// });
// }
// document.querySelector('#save').addEventListener('click', onSave);
// document.getElementById("save").click()
<div class="draw-boar" style="border:2px solid #ccc">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c29a56fd0c5032f875a9449c65a9.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660351351&t=97a8857b561fe49b0a780a4ebe15be55"
id="img">
<!-- <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657818000&t=ae9557b80212ae1619d76586feecd45a" width="300" height="300" id="img"> -->
<canvas id="canvas" width="300" height="300"></canvas>
<!-- <input accept="image/*" type="file" id="uploadIMG" onchange="btnUploadFile(event)" /> -->
</div>
<div class="draw-boarr">
<button onclick="beginDraw()">画笔</button>
<button onclick="bianhong()">红色</button>
<button onclick="bianlan()">蓝色</button>
<button onclick="{ctx.clearRect(0,0,300,300)}">清空</button>
<!-- <button id="erase" class="erase">擦皮</button> -->
<!-- <button onclick="submitCanvas()">提交</button> -->
<button id="btn" onclick="download()">点我下载</button>
<button onclick="downloadIamge(imgUrl)">下载原图</button>
<img src="" alt="">
<!-- <button id="save">点我下载原图</button> -->
<hr>
</div>
.draw-boar {
width: 300px;
margin: 30px auto;
background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c29a56fd0c5032f875a9449c65a9.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660351351&t=97a8857b561fe49b0a780a4ebe15be55");
}
.draw-boarr {
width: 300px;
margin: 30px auto;
}
img {
display: none;
}