java进阶(九)------图片跨域显示---服务端获取图片显示在jsp中

我们在前面讲了一种解决跨域的方法是利用服务端中转:

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;
    }