uniapp使用canvas的一些问题

迈不过友情╰ 2022-12-24 00:55 18阅读 0赞

**1、canvas无效，出不来**  
修改前：

let ctx = uni.createCanvasContext('shareCanvas');

修改后：

let ctx = uni.createCanvasContext('shareCanvas', this);

在自定义组件下，第二个参数传入组件实例**this**，若不传，则无法显示

**2、canvas绘制图片（drawImage）无效，显示不了**  
修改前：

let imageW=uni.upx2px(456)//图片的尺寸
    let imgUrl=this.shareData.image//动态的图片，网络路径
    ctx.drawImage(imgUrl,0,0,imageW,imageW)
    ctx.draw();

修改后：

let imageW=uni.upx2px(456)//图片的尺寸
    let imgUrl=this.shareData.image//动态的图片，网络路径
    uni.downloadFile({ 
    	url:imgUrl,
    	success(res){ 
    		ctx.drawImage(res.tempFilePath,0,0,imageW,imageW)
    		ctx.draw();
    	}
    })

uniapp的drawImage绘制图片和[微信小程序][Link 1]一样，图片路径不能使用网络路径，必须先下载到本地（使用uni.downloadFile()下载成临时文件路径也行）

**3、canvas生成图片提示**  
![在这里插入图片描述][19b195104e5e4f3a9576521c6b2cfca0.png]  
使用uni.canvasToTempFilePath出现如图错误，那么要检查下canvasId是否填写错误

uni.canvasToTempFilePath({ 
    	canvasId: 'myCanvas',
    })

如果没有填写错误，又是在组件中使用，那么canvasToTempFilePath的**第二个参数**必须要传入，简单的来说就是要加this，但是又不能直接加this

var that=this
    uni.canvasToTempFilePath({ 
    	canvasId: 'myCanvas',
    },that)

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
[19b195104e5e4f3a9576521c6b2cfca0.png]: /images/20221120/94cb698fb4e94f97b5290482ecaf160a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 html2canvas 绘制海报框架uniapp

<div class="canDiv" ref="canDiv" v-show="haiBa"> <vi

小咪咪/ 2023年09月29日 11:02/ 0 赞/ 17 阅读

相关 uniapp 横屏签名旋转canvas

使用插件[canvas手写板，横屏签名 - DCloud 插件市场][canvas_ - DCloud] 保存后签名是横屏的，上传时需正的获取到图片路径后创建新的canv

本是古典何须时尚/ 2023年09月24日 22:17/ 0 赞/ 63 阅读

相关 uniapp 使用canvas 画图连线

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4

喜欢ヅ旅行/ 2023年02月20日 02:39/ 0 赞/ 98 阅读

相关 uniApp小程序保存图片canvas

<template> <view class="poster_box">  <view class="my

落日映苍穹つ/ 2022年12月25日 14:57/ 0 赞/ 285 阅读

相关 uniapp使用canvas的一些问题

1、canvas无效，出不来修改前： let ctx = uni.createCanvasContext('shareCanvas'); 修改后：

迈不过友情╰/ 2022年12月24日 00:55/ 0 赞/ 19 阅读

相关 uniapp遇到的一些问题

问题1、文件查找失败，缺少axios模块 ![在这里插入图片描述][2020102615384361.png_pic_center]解决：在uniapp项目中，运行命令行n

╰+哭是因爲堅強的太久メ/ 2022年12月18日 10:51/ 0 赞/ 438 阅读

相关 uniapp实现canvas画图

画布画图片和文字 //页面组件 <canvas style="width:206px;height:180px;" id="canvas" canvas-id

向右看齐/ 2022年10月07日 11:44/ 0 赞/ 961 阅读

相关 uniapp遇到的一些问题

进入页面，数据打印出来了，但是页面没有渲染出来方法一：页面代码添加v-if='updateNewData' <view class="item"

以你之姓@/ 2022年09月07日 12:19/ 0 赞/ 664 阅读

相关 HttpURLConnection的一些使用问题

1.getOutputStream和getInputStream返回的流都是用于输出或者输入报文实体的，而不是报文头部。 2.请求行根据设置的请求方法和URL中的信息自动拼接

你的名字/ 2022年02月04日 04:19/ 0 赞/ 285 阅读

相关 uniapp canvas绘图生成海报

组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <butt

妖狐艹你老母/ 2021年09月19日 13:18/ 0 赞/ 1479 阅读