我们在前面讲了一种解决跨域的方法是利用服务端中转:
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中使用:
<img src="data:image/png;base64,iVBORw0KGgo=..." />
- 图片转换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;
}