项目场景：

uniapp 开发iOS App ,其中有个功能是拍照后，给照片加水印后显示在界面；
功能实现的思路：调用拍照方法获取照片，把照片导入canvas中，加水印后导出图片，最后展示图片。

问题描述

加水印的照片导出后会变形或者显示不完整

原因分析：

1.canvas的尺寸要与照片尺寸等比例，不然图片会显示不完整，或者导出的图片有黑边。
2.canvas初始要加宽高，算完尺寸再加宽高的话，图片会变形。

解决方案：

1.canvas加默认宽高

<canvas :style="`width:${sWidth}px; height:${sHeight}px;`" canvas-id="imgCanvas" id="imgCanvas"></canvas>

2.把设备的宽高等比例计算后，赋值给canvas

 uni.getSystemInfo({//获取设备信息success: info => {uni.getImageInfo({//获取图片信息src:picUrl,success: res => {//设备宽const sWidth = info.windowWidth || 375;//按图片长宽比，算出高度let sHeight = sWidth / (res.width / res.height);sHeight=Number(sHeight.toFixed(0));//赋值给canvasthis.sWidth=sWidth;this.sHeight=sHeight;//初始化画布const ctx = uni.createCanvasContext('imgCanvas');ctx.fillRect(0, 0, sWidth, sHeight);//将图片src放到cancas内ctx.drawImage(res.path, 0, 0, res.width,res.height,0,0,sWidth, sHeight);//处理图片......//导出图片......}})}})

3.在canvas中加文字，图形等…处理完图片后，导出图片

//导出图片
this.$nextTick(() => {ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'imgCanvas',fileType:'jpg',success: res => {// console.log('导出的图片：',res.tempFilePath)}});});
})

处理canvas导出的图片变形的问题相关推荐

JavaFX将Node导出为图片
转载自 JavaFX将Node导出为图片在JavaFX中提供了一个很实用的功能.我们可以将任意节点截图导出. 代码如下: WritableImage image = mapCanvas.snap ...
android canvas png 失真,【小程序】--------------处理canvas导出图片模糊问题-------------【劉】...
一.业务需求: 使用canvas在前端生成海报,并在海报上添加上水印.最后导出图片并保存到本地. 二.业务逻辑实现: (1)创建canvas画布======>(2)在canvas上绘制海报=== ...
ps快速导出png图片设置为小程序tabBar图标变形
正确的导出png能够正常显示不变形可以使用 ctrl+shift+alt+s导出为web所有旧版格式的png 原理在于: 快速导出的png图片宽高都只有图片横竖方向上所占的像素最大值常规导出的图片宽 ...
微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
(给前端大全加星标,提升前端技能) 转自:coyota666 https://juejin.cn/post/6901273585428463624 前言电子签名通俗来说就是通过技术手段实现在电子文档 ...
java blob转为图片_导出的图片为什么会糊？！
文章:李蕊(成都中心) 排版:陈倩背景: 某天我收到来自公司首席设计师的一则钉钉消息:轻设计编辑器导出的图片为什么会模糊?当我看到这个问题时,脑海中不禁产生了下面的疑问:怎么会模糊呢?是不是添加到编 ...
Python-在线网页导出为图片或pdf
我们都知道一个正常的网页,是由html+css+js组成,而其本质是一段段代码编写编译而来的.而图片是由一堆二进制数据组成的,我们该如何将网页上显示的内容导出为我们想要的图片或者pdf呢?博主闲极无聊 ...
android webview将网页内容导出为图片和PDF方法
项目需求中需要把webview的网页内容导出为图片和PDF,方法如下导出为PDF 注意: 该方法只能在API 19+可以使用代码如下: public void printPDF() {if (Bu ...
nodejs html 生成图片,使用nodejs将html5 canvas base64编码图片保存为文件
目前流行的"你画我猜"应用,你有没有想过使用HTML5来实现过?那么不可避免的需要解决canvas保存图片到硬盘或mongodb之类的数据库.本文主要介绍使用nodejs将html ...

处理canvas导出的图片变形的问题

项目场景：

问题描述

原因分析：

解决方案：

处理canvas导出的图片变形的问题相关推荐

最新文章

热门文章