支持图片复制
/**
* URL转base64
* @param url String 图片链接
* @callback Function 获取base64格式后的回调函数
*/
function getImgToBase64(url, width, height, callback) {
let canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const img = new Image(); //通过构造函数绘制图片实例
img.crossOrigin = "Anonymous"; //处理图片跨域问题
img.onload = function () {
//该加载过程为异步事件,请先确保获取完整图片
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(img, 0, 0, width, height); //将图片绘制在canvas中,图片压缩
} else {
context.drawImage(img, 0, 0);
}
const URLData = canvas.toDataURL("image/png");
callback(URLData);
canvas = null;
};
img.onerror = function () {
callback("");
canvas = null;
};
img.src = url;
}
const copyElementToClipboard = (element) => {
window.getSelection().removeAllRanges();
const range = document.createRange();
range.selectNode(
typeof element === "string" ? document.getElementById(element) : element
);
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
};
const clipboardHandler = (event) => {
const target = event.target || event.srcElement;
const type = target.nodeName;
switch (type) {
case "IMG":
getImgToBase64(target.src, target.width, target.height, (data) => {
// 只能是ClipboardItempng格式,但可以复制JPG
if (data) {
const blob = base64ToBlob(data, "image/png");
const item = new window.ClipboardItem({ "image/png": blob });
if (navigator.clipboard) {
navigator.clipboard.write([item]);
}
}
});
break;
default:
copyElementToClipboard(target);
break;
}
};
editor.document.addEventListener("copy", (e) => {
clipboardHandler(e);
});