精华内容
下载资源
问答
  • 小程序canvas高斯模糊

    2021-08-26 14:47:38
    //以下是小程序html代码 <canvas canvas-id="canvasIn" class="canvas"></canvas> <canvas canvas-id="canvasOut" class="canvas"></canvas> <button bindtap="openAndDraw">打开...
    //以下是小程序html代码
     <canvas canvas-id="canvasIn" class="canvas"></canvas>
     <canvas canvas-id="canvasOut" class="canvas"><
    展开全文
  • 因此使用下面代码就可以在浏览器中展示一个600×386的Canvas。 <html> <head> <title>Canvas demo</title> <style> * { padding: 0; margin: 0; } html, body { width: 100...
  • 比如说二倍屏,手机就会以2个像素点的宽度来渲染一个像素,该 canvas 在屏幕中相当于占据了2倍的空间,相当于绘制的元素被放大了一倍,因此绘制出来的图片文字等会变模糊。 解决方案思路 首先要明确一点,canvas分为...

    原因

    因为 canvas 不是矢量图,而是像图片一样属于位图。高 dpi 显示设备意味着每平方英寸有更多的像素,比如说二倍屏,手机就会以2个像素点的宽度来渲染一个像素,该 canvas 在屏幕中相当于占据了2倍的空间,相当于绘制的元素被放大了一倍,因此绘制出来的图片文字等会变模糊。

    解决方案思路

    首先要明确一点,canvas分为画布尺寸和渲染尺寸。渲染尺寸就是在css样式文件里设置的width、height大小,而画布尺寸则是在canvas标签里设置的width和height,比如< canvas id=‘canvas’ width=“200” height=“200” />。
    明确了什么是画布尺寸,什么是渲染尺寸。那么解决canvas在高清屏模糊的问题就很简单了,只需要将canvas的画布尺寸扩大到渲染尺寸的设备像素比倍,然后再缩放到渲染尺寸显示即可。举个例子,假如一个canvas的实际渲染尺寸大小为200x200px,那么在iPhone x手机DPR为3的情况下canvas的画布尺寸则为600*600,canvas绘制完毕后再缩放3倍显示即可。

    效果图

    优化前优化前
    优化后
    在这里插入图片描述

    代码

    //设计稿宽度,一般为750
    const UI_Width = 750
    //同步获取设备系统信息
    const info = wx.getSystemInfoSync()
    //设备像素密度
    const dpr = info.pixelRatio;
    //计算比例
    const scale = info.screenWidth / UI_Width
    //计算canvas实际渲染尺寸
    let width = parseInt(scale * 335)
    let height = parseInt(scale * 299)
    //计算canvas画布尺寸
    let canvasWidth = width * dpr
    let canvasHeight = height * dpr
    //绘制canvas
    drawCurrent(data) {
        const ctx = wx.createCanvasContext('canvas');
        //根据像素密度缩放
        ctx.scale(dpr, dpr)
        ctx.beginPath();
       	//此处省略绘制代码
        ctx.draw();
    }
    //canvas渲染尺寸
    const size = {
          width: hasLast ? '335rpx' : '361rpx',
          height: hasLast ? '299rpx' : '330rpx'
    }
    //dom标签
    <canvas id="canvas" style={{ ...styles.canvas, ...size }} width={canvasWidth} height={canvasHeight} />
    

    以上代码需要用到的公式如下:
    渲染比例=设备屏幕宽度/设计稿宽度
    canvas渲染尺寸=渲染比例x设计稿元素宽度
    canvas画布尺寸=canvas渲染尺寸x设备像素比

    展开全文
  • 小程序canvas分享图片模糊解决方案

    千次阅读 2020-03-22 20:36:42
    分享的图片生成及导出模糊问题解决方案 1.原因: 2.解决: 在小程序中显示的用标签组合; 保存到相册的用canvas绘制后导出,canvas设置在屏幕上方不可见,设置图片大小 ...

    看到网上有好多小程序分享图片显示及导出模糊问题,想了下解决方案备用:

    1.原因:

           因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。比如说二倍屏,手机就会以2个像素点的宽度来渲染一个像素,该 canvas 在屏幕中相当于占据了2倍的空间,相当于被绘制的元素被放大了一倍,因此绘制出来的图片文字等会变模糊。

    2.解决方案:

    一、canvas图片生成与显示分离:

    1. 在小程序中显示给用户看的用标签组合显示分享二维码及背景图;
    2. 在保存到相册时用canvas绘制二维码及背景图后然后导出,canvas设置真实图片大小且设置在屏幕上方对用户不可见;
    3. 导出后清空画布节省内存;

    这样就能使显示给用户看的图片及导出的图片都清晰了。

    二、canvas生成图片并保存后显示给用户:

    1. canvas设置真实大小及用户不可见,在用户点击分享时把二维码与背景图组合填充canvas并保存canvas图片;
    2. 给用户显示的image中设置保存的图片;

    第二种方法适合分享的图片为一张的时候,分享的图片多张左右滑动时第一种适合。

    注:这方法适用与分享二维码及背景图都是动态的情况,如果分享二维码及背景图都是固定的可以让UI切一整张图用image显示即可。

    展开全文
  • 绘制的图片,文字等十分模糊 添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr)...

    绘制的图片,文字等十分模糊

    添加以下代码,通过设置分辨率来解决

    	const dpr = wx.getSystemInfoSync().pixelRatio
    	canvas.width = res[0].width * dpr
    	canvas.height = res[0].height * dpr
    	ctx.scale(dpr, dpr)
    

    完整代码:

    <!-- canvas.wxml -->
    <canvas type="2d" id="myCanvas"></canvas>
    
    // canvas.js
    Page({
      onReady() {
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
          .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)
    
            ctx.fillRect(0, 0, 100, 100)
          })
      }
    })
    

    吐槽一下,官方不做说明,折腾半天

    展开全文
  • 首先确定 userInfo 的 avatar 不是 132,原图是 0; 其次确定你的 destWidth 和 destHeight 不是 width 和 height; width: 200, height: 200, ... canvasId: 'shareImg', quality: 1, 重点: get
  • 我们在用微信小程序canvas可能会遇到生成的图片保存后很模糊的问题,根据之前的经验,我总结了两种解决办法,分别从画canvas,和保存的角度解决,各有利弊。 1、画canvas时,都用设计稿的2倍,wx....
  • 小程序canvas导出图片模糊解决方法

    千次阅读 2019-04-03 10:14:11
    wx.canvasToTempFilePath({ x: 0, y: 0, width: 200, ... canvasId: 'artQr', success(res) { console.log(res.tempFilePath) that.setData({ qrImg: res.tempFilePath }) } })  
  • 小程序canvas放大模糊HTML5 Canvas Image Effects App – Adding Blur. Today we continue HTML5 canvas examples, hope that you remember application which we made quite 2 weeks ago? Sure that this was very ...
  • 小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢? 我们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;...
  • wx.getSystemInfoSync().windowWidth, //绘制canvas的时候用的是px, 这里换算成rpx ,导出后非常清晰 destHeight: 680 * 750 / wx.getSystemInfoSync().windowWidth, //同上 px 换算成 rpx canvasId: ' ...
  • } 二、canvas 画二倍图 文字居中 实际展示正常海报为375*470 绘制中生成图模糊(文字有锯齿边,图片模糊)。绘制过程中绘制二倍图大小750*940 并保存,则能解决该问题 let x = ctx.width / 2;//canvas宽的一半 //...
  • 1、微信小程序中的canvas绘制图片截图,拿到的图片会模糊? (此图片来源于网络,如有侵权,请联系删除! ) 需求是我在微信小程序中使用canvas把图片绘制到图中黑框区域,然后进行编辑操作最后拿到编辑后的图片,图片...
  • 小程序canvas实现图片滤镜

    千次阅读 2018-09-05 18:05:26
    微信小程序canvas应该知道的基本操作 例:用canvas实现图片滤镜 现在还没有解决的问题? 微信小程序canvas应该知道的基本操作 canvas绘图 其实没什么说的,微信小程序文档上面都有,我在这里面把常用的和容易...
  • 小程序 canvas画图片

    2021-08-15 19:35:08
    小程序 canvas 新版(2.9.0之后)和旧版画图步骤 这边记录一下希望大家少踩坑 旧版 需要canvas-id <canvas :style="`width: ${cWidth}px; height: ${cHeight}px;position:fixed;left:-10000px;`" canvas-id=...
  • 最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,...
  • 一、制作正常页面显示海报,实际canvas画布生成二倍图隐藏,下载时缩小显示即可解决模糊问题。二倍海报图屏幕仅能展示一半。保存图为750*940,实际canvas大小应为375px*470px ,此处二倍画图设置canvas大小为750px*...
  • canvas是微信小程序中最常用的组件之一,可以实现图片裁剪、压缩等多种功能。但是实现这些功能的前提之一是用canvas绘制图片,但是由于微信官方的辣鸡文档,总是要有坑需要踩,其中最常见的就是使用drawImage这个API...
  • 小程序项目中需要用到echarts图表 但是展示的时候遇到了问题 图表高度失真 体验感非常差 ...devicePixelRatio: dpr //解决小程序视图模糊的问题,必写 }); canvas.setChart(chart); var checkName
  • 关于微信小程序canvas保存图片 参考知识:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 大家都知道,现在的版本微信已经不再更新维护wx.createCanvasContext方法了,从基础库 [2.9.0]...
  • canvasId: 'myCanvas', destWidth: canvasW * 4, //屏幕宽 destHeight: canvasH * 4, fileType: "png", //文件格式,支持png和jpg success: function (res) { //这就是生成的文件临时路径 var tempFi...
  • x-y轴示意 创建canvas ...<canvas id="canvas" width="400" height="300"> // wx uni ...canvas canvas-id="canvas" style="width: 100%;height: 100%;" /> </view> -----------------------
  • 微信小程序Canvas绘图API

    万次阅读 多人点赞 2019-08-31 13:42:35
    微信小程序Canvas绘图API前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用)颜色、样式setFillStyle(string|CanvasGradient color)fill()setStrokeStyle(string color)stroke矩形rect(number x, ...
  • 小程序画布保存图片模糊解决办法

    千次阅读 2019-12-20 17:08:45
    wx.canvasToTempFilePath({ x: 0, ... canvasId: 'bigCode', success(res) { that.setData({ shareImgSrc: res.tempFilePath }, () => { console.log(that.data.shareImgSrc) }) } })
  • 之前写过一篇小程序分享,体验不是很好。因为用户点击去分享时,canvas绘制并转换成图片需要一定的时间,用户视觉等待的时间有点长。为了更好的优化这一体验,我们可以这么做: 1、用户点击去分享,先用页面标签将...
  • console.log(pixelRatio) var dpr = getPixelRatio() // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 加上这一行即可解决模糊问题 });...
  • 先交代一下背景,最近做一个微信小程序的项目,项目中有一个需求,就是生成日签和海报功能,最开始想通过微信小程序自带的canvas来实现,实际实现中,效果很不理想,通过drawImage写入到canvas中图片,不是显示不全...
  • 使用canvas进行截图,就是在canvas画布上把想要的东西画一遍然后保存成图片。 如果是线上图片要使用wx.getImageInfo进行转换再显示在canvas上 wxml: <view class="canvas-box" > <canvas type="2d" id=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,733
精华内容 1,893
关键字:

小程序canvas模糊