IOS h5利用canvas生成海报无法显示

mucongxin

于 2024-11-29 10:56:47 发布

阅读量426

点赞数 9

文章标签： html5 safari 前端

本文链接：https://blog.csdn.net/mucongxin/article/details/144130529

版权

最近在做一些H5海报项目中，苹果手机生成海报显示空白，安卓显示正常。解决方式主要从以下几点排查：

1、元素图片是否下载成功？

如果图片是从远程地址拉取，需要设置图片跨域

                                var img = new Image();
                                img.crossOrigin = 'Anonymous'; //解决跨域问题
                                img.src = newDataURL;
                                img.setAttribute("style", "width:100%;");

2、canvas生成的图片是否过大？

尝试调整canvas画布大小，建议调整为750px

                var context = canvas.getContext('2d');
                var backingStore = context.backingStorePixelRatio ||
							//context.webkitBackingStorePixelRatio ||
							context.mozBackingStorePixelRatio ||
							context.msBackingStorePixelRatio ||
							context.oBackingStorePixelRatio ||
							context.backingStorePixelRatio || 1;
 
				var ratio = (window.devicePixelRatio || 1) / backingStore;
                //var ratio = window.devicePixelRatio || 1;
                canvas.style.width = '750px';
                canvas.style.height = '1333px';
                canvas.width = 750*ratio;
                canvas.height = 1333*ratio;
                canvas.style.letterSpacing = "2px";
                console.log(ratio)
                context.scale(ratio,ratio);