我们在前面讲了一种解决跨域的方法是利用服务端中转:
java进阶(八)------动态获取图片—服务端获取图片显示在jsp中
但是在jsp页面时还是需要给一个服务器的链接。
这种情况 如果服务器允许跨域访问不起作用的话，还是会出现跨域问题。
比如在canvas中使用这个中转链接还是会报错:
var testpic=http://123.12.12.12:8080/testpic;//这是中转服务器的图片地址，详见第八篇
ctx.drawImage(listicon, (cvsWidth - ctx.measureText(name).width)/(dpr*2) - 17, 20, 12, 20);
// 绘制png - 二维码
var codeImg = new Image();
codeImg.src = testpic;
codeImg.onload = function() {
ctx.drawImage(codeImg, cvsWidth/(dpr*2) - 90, 360, 70, 70);
$('.cloud-wrap').append(that.cvsToPng(cvs));
}
// Canvas 转 Png
cvsToPng: function(cvs) {
var img = $('<img class="cloud-img-share" crossOrigin="*">');
img.crossOrigin = "*";
img.attr('src', cvs.toDataURL('image/png'));
return img;
}
报错信息:
Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
这种情况下我们不能用外链的形式获取图片了，只能在服务端拿到图片后用base64形式传给图片给canvas来绘制。
base64图片工具介绍 | Base64 Encode/Decode Tool
-
支持 PNG、GIF、JPG、BMP、ICO 格式。
-
将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。
-
假定生成的代码为“data:image/jpeg;base64, …”，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。
-
CSS中使用：
background-image: url(“data:image/png;base64,iVBORw0KGgo=…”);
-
HTML中使用：
-
图片转换Base64，无线开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。
-
将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。
思路
把图片转成base64字符串后放到model容器中。jsp页面获取后再传到canvas中。
服务端代码
private InputStream testpic() throws IOException {
String imgUrl = "https://www.baidu.com/img/bd_logo1.png";
URL url = new URL(imgUrl);
URLConnection conn = url.openConnection();
return conn.getInputStream();
}
model.addAttribute("testpic", Base64.encodeBase64String(IOUtils.toByteArray(testpic())))
jsp代码
var testpic='data:image/png;base64,${testpic}'//区别在这
ctx.drawImage(listicon, (cvsWidth - ctx.measureText(name).width)/(dpr*2) - 17, 20, 12, 20);
// 绘制png - 二维码
var codeImg = new Image();
codeImg.src = testpic;
codeImg.onload = function() {
ctx.drawImage(codeImg, cvsWidth/(dpr*2) - 90, 360, 70, 70);
$('.cloud-wrap').append(that.cvsToPng(cvs));
}
// Canvas 转 Png
cvsToPng: function(cvs) {
var img = $('<img class="cloud-img-share" crossOrigin="*">');
img.crossOrigin = "*";
img.attr('src', cvs.toDataURL('image/png'));
return img;
}
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦