最近在做页面截屏时遇到一个问题，截屏需要将图片的网络路径转换为base64格式的，
在做转换的时候遇到的小坑，
// 图片地址图是京东上随便找的一张图有很多网络图片是有限制的不能拿来随便用……
<img id="ssss" src="https://img10.360buyimg.com/mobilecms/s140x140_jfs/t17458/302/1792090017/223266/7f72f23e/5ad851cdN50df02d5.jpg!q90.webp" alt="" />
// js代码
var img = new Image();
img.src = $('#img').attr('src');
img.onload = function() {// 图片加载后执行的方法
var base64 = getBase64Image(img);// 将图片转成base64格式的方法
$('#img').attr('src', base64); // 将原来的图片src改为base64格式的地址
}
function getBase64Image(img){
var canvas = document.createElement("canvas");// 创建一个canvas
canvas.width = img.width; // 设置对应的宽高
canvas.height = img.height;
var ctx = canvas.getContext("2d"); // 二维绘图环境
ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片画在画布上
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
var dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
return dataURL;
}
好了这时候报错了画布污染不能导出
image.png
是因为涉及到跨域了
这时候如果是把图片下载下来 起了服务了是可以的
当然这并不是我最终想要的
查阅资料翻看博客发现有一个属性
crossOrigin="anonymous"允许跨域然后我加上试了之后也不行；还是报错。
但是当
crossOrigin=""时却可以了代码
var img = new Image();
img.crossOrigin = ""; //跨域
img.src = $('#img').attr('src');
img.onload = function() {// 图片加载后执行的方法
var base64 = getBase64Image(img);// 将图片转成base64格式的方法
$('#img').attr('src', base64); // 将原来的图片src改为base64格式的地址
}
function getBase64Image(img){
var canvas = document.createElement("canvas");// 创建一个canvas
canvas.width = img.width; // 设置对应的宽高
canvas.height = img.height;
var ctx = canvas.getContext("2d"); // 二维绘图环境
ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片画在画布上
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
var dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
return dataURL;
}
完美解决问题
解决了问题了记得点个赞哦
