Uniapp 使用html2canvas 插件显示跨域bug

打开:html2canvas.js

找到代码:

 img.src = src;
改为
img.src = src+"?t="+new Date().getTime();

修改后的代码

 Cache.prototype.loadImage = function (key) {
            return __awaiter(this, void 0, void 0, function () {
                var isSameOrigin, useCORS, useProxy, src;
                var _this = this;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            isSameOrigin = CacheStorage.isSameOrigin(key);
                            useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
                            useProxy = !isInlineImage(key) &&
                                !isSameOrigin &&
                                !isBlobImage(key) &&
                                typeof this._options.proxy === 'string' &&
                                FEATURES.SUPPORT_CORS_XHR &&
                                !useCORS;
                            if (!isSameOrigin &&
                                this._options.allowTaint === false &&
                                !isInlineImage(key) &&
                                !isBlobImage(key) &&
                                !useProxy &&
                                !useCORS) {
                                return [2 /*return*/];
                            }
                            src = key;
                            if (!useProxy) return [3 /*break*/, 2];
                            return [4 /*yield*/, this.proxy(src)];
                        case 1:
                            src = _a.sent();
                            _a.label = 2;
                        case 2:
                            this.context.logger.debug("Added image " + key.substring(0, 256));
                            return [4 /*yield*/, new Promise(function (resolve, reject) {
                                    var img = new Image();
                                    img.onload = function () { return resolve(img); };
                                    img.onerror = reject;
                                    //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
                                    if (isInlineBase64Image(src) || useCORS) {
                                        img.crossOrigin = 'anonymous';
                                    }
                                    img.src = src+"?t="+new Date().getTime();
                                    if (img.complete === true) {
                                        // Inline XML images may fail to parse, throwing an Error later on
                                        setTimeout(function () { return resolve(img); }, 500);
                                    }
                                    if (_this._options.imageTimeout > 0) {
                                        setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout);
                                    }
                                })];
                        case 3: return [2 /*return*/, _a.sent()];
                    }
                });
            });
        };

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装wxml2canvas插件uniapp项目中的HBuilderX编辑器中,打开插件市场,搜索wxml2canvas插件并安装。 2. 引入wxml2canvas插件 在需要使用wxml2canvas插件的页面中,引入wxml2canvas插件: ```javascript import wxml2canvas from '@/wxml2canvas/wxml2canvas.js'; ``` 3. 绘制圆角图片 在页面中,使用wxml2canvas插件的draw函数绘制圆角图片: ```javascript draw() { let that = this; let query = uni.createSelectorQuery().in(this); query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); const dpr = uni.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); const image = canvas.createImage(); image.src = that.data.imageUrl; image.onload = () => { // 绘制圆角图片 that.drawRoundImage(ctx, image, 0, 0, res[0].width, res[0].height, 10); }; }); }, drawRoundImage(ctx, img, x, y, w, h, r) { ctx.save(); ctx.beginPath(); // 绘制圆角矩形 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5); ctx.lineTo(x + w - r, y); ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2); ctx.lineTo(x + w, y + h - r); ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5); ctx.lineTo(x + r, y + h); ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI); ctx.closePath(); ctx.clip(); // 绘制图片 ctx.drawImage(img, x, y, w, h); ctx.restore(); } ``` 4. 在页面中使用canvas标签 在页面中添加canvas标签,并赋予一个id值: ```html <canvas id="myCanvas" style="width: 100%; height: 300rpx;"></canvas> ``` 5. 调用draw函数 在页面的onLoad函数中,调用draw函数绘制圆角图片: ```javascript onLoad() { this.draw(); }, ``` 以上就是使用wxml2canvas插件uniapp中绘制圆角图片的完整流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值