java canvas 打开图片_基于canvas生成图片

随着APP的获客成本越来越高，很多产品开始从wap页引流，而最常见的方式便是分享，尤其是在微信中。因此诞生了一些新玩法，比如生成一张海报图片，用户可以保存或分享到其他平台。

本文将介绍如何生成一张海报图片，以及可能会碰到的问题和解决方案。

canvas转图片

目前移动端浏览器对于canvas的支持非常好，而canvas可以通过toDataURL来转换成base64图片。

市场上的一些js库，如：html2canvas、dom-to-image，其本质也是通过toDataURL来转换成图片。但我个人不太建议使用这类js库，因为你可能需要填很多坑，结果也并不一定能达到你的期望，所以还是老老实实用canvas画出来吧。

外链图片

最重要也是最复杂的便是对外链图片的处理，canvas绘图时不会有任何问题，但是调用toDataURL这个方法时，浏览器会报错。

跨域

你请求的外域图片，可能会暴露你的隐私，所以浏览器为了保护你的隐私限制了这样的请求。

我们可以设置crossOrigin为anonymous来允许跨域，浏览器会为这张图片的请求头附带Origin信息，告诉静态资源服务器，请在响应头中附带Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便浏览器放行。

但是有些时候，设置了crossOrigin依然会报错，其实不是设置了没有作用，而是cdn缓存了服务器响应结果，这个结果往往是没有上述两个字段的。这个时候可以考虑给图片链接后追加时间戳，对于cdn来说，这是一个没有请求过的资源&