- Canvas 2d 旋转图片在ios真机上与开发者工具输出不同(感觉高度少了一半)?
//旋转图像 async RoImage(url) { let autoRotate = this.data.autoRotate, off = wx.createOffscreenCanvas({ type: '2d' }), image = off.createImage(); await new Promise((resolve, reject) => { wx.getImageInfo({ src: url, success(res) { //image.src = url; image.name = res.type; //变量定义、赋值 let width = res.width, height = res.height; console.log('[RoImage]处理前尺寸: ' + width + ' x ' + height); //绘制canvas 旋转图片 const $ = wx.createSelectorQuery(); $.select('#canvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); let bg = canvas.createImage(); bg.src = url; bg.onload = () => { if (height > width && autoRotate == '1') {//自动旋转 //旋转图片开始 console.log('旋转90度'); //画板宽高调换 canvas.width = height; canvas.height = width; //图片开始旋转 ctx.translate(height / 2, width / 2);//原点移动到(/2, /2)中心点 ctx.rotate(270 * Math.PI / 180);//-90度 ctx.drawImage(bg, -width / 2, -height / 2, width, height); //图片宽高调换 let ro_w = width, ro_h = height; width = ro_h; height = ro_w; console.log('[RoImage]处理后尺寸: ' + width + ' x ' + height); } else { //画板宽高调换 canvas.width = width; canvas.height = height; console.log('[RoImage]跳过旋转: ' + width + ' x ' + height); ctx.drawImage(bg, 0, 0, width, height); } //canvas转文件的临时路径 (本地路径) wx.canvasToTempFilePath({ canvas, quality: 1, fileType: "jpg", success: (res) => { //保存图片到本地 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { console.log(res); } }); console.log('[RoImage]处理完成', res.tempFilePath); image.src = res.tempFilePath; image.onload = resolve; // 绘制图片逻辑 } }) } }) }, fail(res) { image.src = url; console.log(res); image.onload = reject; // 绘制图片逻辑 } }); }) return image; }, 开发者工具: [图片] ios真机: [图片][图片]
2023-02-07 - canvas没有旋转画布整个的方法 要怎么旋转?
canvas没有旋转画布整个的方法 要怎么旋转?
2020-09-11 - canvas绘制好怎么旋转?
用的2D绘制的签名,横屏签名的,需要上传旋转-90的canvas图,这要怎么操作,wx.canvasToTempFilePath之后再旋转绘制一遍?然后再走一遍wx.canvasToTempFilePath?谢谢
2021-12-10 - Context.drawImage 使用 HTMLCanvasElement 报错Failed?
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame) wx.createSelectorQuery() .select('#canvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { console.log(res) dpr = wx.getSystemInfoSync().pixelRatio canvas = res[0].node // 重点1 // console.log(canvas) canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.beginPath(); ctx.scale(dpr, dpr) bg = canvas.createImage() bg.src = '/img/lz.jpg' bg.onload = () => { ctx.drawImage(bg, 0, 0) } }) ctx.drawImage(canvas, magnifyRectangle.x - magnifyGlassRadius, magnifyRectangle.y - magnifyGlassRadius, magnifyRectangle.width, magnifyRectangle.height, magnifyRectangle.x - 2 * magnifyGlassRadius, magnifyRectangle.y - 2 * magnifyGlassRadius, scaledMagnifyRectangle.width, scaledMagnifyRectangle.height )
2022-08-22 - TypeError: Failed to execute 'drawImage' 报错?
下面是我的代码,想通过wx.getImageInfo获取网络图片后,然后用drawImage在canvas上将图片显示出来,但是一直报错。 代码如下: onShow: function () { var that = this const query = wx.createSelectorQuery() query.select('#shareCanvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) wx.getImageInfo({ src: that.data.photoUrl, success(res) { console.log("头像路径:"+res.path) ctx.drawImage(res.path, 0, 0) ctx.draw() } }) }) }, 报错信息如下: thirdScriptError Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)';at api getImageInfo success callback function TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at CanvasRenderingContext2D.e.drawImage (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:647372) at success (http://127.0.0.1:51536/appservice/pages/card/img.js:47:15) at Function.o.<computed> (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:1366445) at Object.success (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:124200) at y (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:526317) at v (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:526555) at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:528109 at n.<anonymous> (http://127.0.0.1:51536/appservice/__dev__/asdebug.js:1:12078) at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:124200 at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:107123
2020-03-08 - wx.previewMedia播放视频时候,无法退出,只能手势下拉视频退出,有解决方法吗?
wx.previewMedia 没有退出按钮,再一次点击视频,无法退出播放,这怎么解决,或者怎么实现视频预览播放的效果,类似朋友圈的视频播放
2021-07-14 - search.submitPages 提交的页面将被如何展示?
search.submitPages 通过后端提交内容接入申请后页面是如何被关键词抓取展示的? 是通过页面的标题还是什么呢? 比如我的小程序页面标题是“首页”,但内容是动态加载的丰富信息,我们的信息将被如何的抓取并匹配展示呢?
2020-05-08 - 开发人员如何引导用户将小程序添加桌面快捷方式?
开发人员如何引导用户将小程序添加桌面快捷方式?
2020-03-12 - 小程序页面内容加图片,生成pdf文档有什么方法?
小程序页面内容加图片(页面字数比较多),请问生成pdf文档有什么方法? 除了从html到pdf,或生成图片。
2020-05-24 - 小程序拍摄图片不留存拍摄的照片吗?
框架类型问题类型API/组件名称终端类型微信版本基础库版本小程序需求chooseImage客户端7.0.12 wx.chooseImage sourceType : 'camera' 如何设置拍照图片不保存到本地相册; 目前照片是业务上的敏感信息;
2020-03-27