Canvas踩过的坑

1、出于对于安全的考虑,drawImage绘制的图片不允许跨域。

1)、如果服务器允许跨域:

var image = new Image();

image.crossOrigin = "*";

2)、如果服务器不允许跨域:
可以将图片转换为二进制文件,使用jsonp的形式解决跨域问题。

2、使用canvas渲染多张图片时,图片加载完成的先后可能并不是代码中所写顺序,可能会导致图片被遮盖。可以使用onload事件的回调函数来强制决定图片的加载顺序。

var image1 = new Image();
var image2 = new Image();

image1.onload = function () {
    console.log("image1");
    image2.src="../img/image2.png";
}

image2.onload = function () {
    console.log("image2");
}

image1.src = "../img/image1.png";
html2canvas生成图片时,可以通过在代码中使用CSS来屏蔽特定的div。你可以在html2canvas的配置选项中设置ignoreElements参数来指定需要屏蔽的元素。具体使用方法如下: 1. 首先,需要在代码中引入html2canvas库,可以使用import语句进行引入。例如:import html2canvas from 'html2canvas'。 2. 在生成图片的代码部分,可以使用html2canvas库提供的方法来生成图片。例如,可以使用html2canvas(this.$refs.cardContent, options)来生成指定元素的截图。其中,this.$refs.cardContent是需要生成图片的元素的引用,options是配置选项。 3. 在配置选项中,可以设置ignoreElements参数来指定需要屏蔽的元素。例如,可以设置ignoreElements: ['.div-to-ignore']来屏蔽class为div-to-ignore的元素。 通过以上步骤,你可以使用html2canvas生成图片时屏蔽指定的div元素。注意,你需要根据你的实际需求来设置ignoreElements参数,并确保CSS选择器的准确性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [html2canvas生成图片到的](https://blog.youkuaiyun.com/qq_42692851/article/details/86978358)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [如何在html2canvas中隐藏div](https://blog.youkuaiyun.com/weixin_30603711/article/details/117786585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值