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

但是在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开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

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

base64图片工具介绍 | Base64 Encode/Decode Tool

思路

服务端代码

jsp代码

猜你喜欢