您的位置:时时app平台注册网站 > web前端 > 微信小程序分享图片的简易canvas工具类【彩世界

微信小程序分享图片的简易canvas工具类【彩世界

2019-11-01 17:28

效果

提起底一个,下载图片。。。what?下载图片和canvas有吗关系、、、当自家急需绘制超级多图纸时,当图片数量不固准时。。。作者就须要他了
/** * @author 赵勇 * @desc 下载图片数组 * * @param images 图片url数组 * @param success 成功回调 * */function downloadImages(images, success, info = [], i = 0) { const wxGetImageInfo = utils.wxPromisify(wx.getImageInfo); wxGetImageInfo({ src: images[I] }).then(res => { info = [...info, res]; I  ; if (i < images.length) { downloadImages(images, success, info, i); } else { success; } }).catch(err => { console.log}
html:
<div style="width: 400px;margin: 40px">
    <div class="top_r"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
    <p id="css2">
        当我听到那句“想带着你南下·感受四季的变化·。看着窗前的花·,静静发芽·长成了牵挂”时,我的心化了。我也想带着一朵温柔如花的她,走过风风雨雨山川河流,来到温润如水的江南,躲过世俗的嘈杂,与她一起感受四季的变化,看窗台上那朵花慢慢发芽,变成彼此的牵挂。
    </p>
    <div class="bottom_r"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>
</div>

 

持有参数按顺序传,未有暗中同意值的必需传,假使急需改正最终二个参数,全数参数都急需传。。。(js小白,不亮堂怎么解决)

上面将非常多功效贴在人世

效果:

假定是图层,效果如下,是能落到实处图层圆角的。

彩世界网址 1

image

比方是图片的情状下:经测验在IE8浏览器下ie-css3不可能使图片完毕圆角作用

彩世界网址 2

image

<view class='dialog u-tri'>
    aaaaaaaaaa

</view>
首先,叁个将rpx转成px的艺术,canvas使用px作为单位,(作者这里UI使用750px宽做规划图,使用的时候将标明软件的px改成rpx正是大家须求的)这一个方法本人直接写在app.js里面,因为用到的位置重重,比方还可能有OSS
 onLaunch: function () { wx.getSystemInfo({ success: res => { //获取屏幕宽度,然后根据宽度图获取图片 this.globalData.screenWidth = res.screenWidth; this.globalData.pixelRatio = res.pixelRatio; this.globalData.factor = res.screenWidth / 750; }, }) }, globalData: { userInfo: null, factor: 0.5, screenWidth: 375, pixelRatio: 2 }, toPx: function  { //这里的 2 可以改成 动态的 pixelRatio //设成固定的是为了在不同设备生成的图片可以在同一级分辨率 return rpx * this.globalData.factor * 2; }
效果:

如图,能够使图层达成圆角效能。

彩世界网址 3

image

风姿浪漫经不是图层而是图片呢,能否使图片完结圆角呢。测量检验是足以的。

彩世界网址 4

image

可是我们要求掌握,全部的主意都不是全能的,也许有它的局限性。

这种是圆角:

2、绘制文字

本条是为了便利设置字体,字号,同临时间重临了最后的x轴坐标,是为了适应某个供给拼接文字的供给(譬如价格拼接单位,不过单位字号不后生可畏致)

/** * @author 赵勇 * @desc canvas 画文字 * * @param ctx canvas上下文 * @param text 需要绘制的文字文字 * @param x 轴 坐标 * @param y 轴 坐标 * @param size 字体大小 * @param align 字体对齐方式 * @param color 字体颜色 * @param baseline 字体基线对齐方式 * @param fontWeight 字体粗细 * * @return 绘制完的 x轴 坐标值 */function drawText(ctx, text, x, y, size = '18', align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') { size = parseInt let font = `${fontWeight} ${size}px sans-serif`; ctx.font = font; ctx.setTextAlign; ctx.setFillStyle; ctx.setTextBaseline; ctx.fillText(text, x, y); let m = ctx.measureText(""   text) return m.width   x;}

消除方案4:

使用纯css落成圆角成效
骨子里这种圆角框是靠一个个器皿堆砌而成的,各种容器的宽窄分歧,那几个上升的幅度是由margin外边距来贯彻的,如:margin:0 5px;正是左右两边的异乡距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次依次减少。由此依附那么些规律大家能够达成轻便的html结商谈体裁。

这种是尖角:

5、绘制图片,不过保持比例填充,同一时间还要圆角

左近在安卓上会有bug。。。一脸狼狈。。。绘图圆角的点子,英特网海人民广播电视台湾大学,作者抄的,所以也就不做表达了

/** * @author 赵勇 * @desc canvas 绘制圆角视图 * * @param ctx canvas上下文 * @param x canvas x轴 坐标 * @param y canvas y轴 坐标 * @param w 宽 * @param h 高 * @param r 圆角半径 * @param fill 填充 true 边框 false */function drawRoundRect(ctx, x, y, w, h, r, fill = true) { //开始绘制 ctx.beginPath(); // 因为边缘描边存在锯齿,最好指定使用 transparent 填充 // 这里是使用 fill 还是 stroke都可以,二选一即可 if  { ctx.setFillStyle('transparent') } else { ctx.setStrokeStyle('transparent') } // 左上角 ctx.arc(x   r, y   r, r, Math.PI, Math.PI * 1.5) // border-top ctx.lineTo(x   w - r, y) // 右上角 ctx.arc(x   w - r, y   r, r, Math.PI * 1.5, Math.PI * 2) // border-right ctx.lineTo(x   w, y   h - r) // 右下角 ctx.arc(x   w - r, y   h - r, r, 0, Math.PI * 0.5) // border-bottom ctx.lineTo(x   r, y   h) // 左下角 ctx.arc(x   r, y   h - r, r, Math.PI * 0.5, Math.PI) // border-left ctx.lineTo // 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应 if  { ctx.fill() } else { ctx.stroke() } ctx.closePath()}

最终调用绘制圆角和制图图片的艺术

/** * @author 赵勇 * @desc canvas 绘制圆角图 mode:aspectFill 保持比例填充 * * @param ctx canvas上下文 * @param imagePath 图片url * @param sWidth 原图宽 * @param sHeight 原图高 * @param dx canvas x轴 坐标 * @param dy canvas y轴 坐标 * @param dWidth canvas 宽 * @param dHeight canvas 高 * @param radius 圆角半径 */function drawImageAspectFillWidthCorner(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight, radius = 0) { ctx.save(); drawRoundRect(ctx, dx, dy, dWidth, dHeight, radius); // 剪切 ctx.clip() drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight); ctx.restore();}

此地须求留意的便是那四个点子的调用机会啦

 ctx.save(); ctx.clip() ctx.restore();
须求注意的点:

1:同样是依附VML,由VML绘制圆角或是投影效果,所以还索要贰个z-index属性。z-index属性最棒设置得超级大,如2。
2:behavior要求相对路线。
3:供给写到对应的HTML里面本事一蹴而就。
4:须求加上position:relative;属性。

除此以外注意一下,小程序采纳能够依附要求将px单位改成rpx单位。作者那边只做轻易演示,小程序端最佳是应用rpx单位哈

注意点:

size 转成整数是因为字号设置是用rpx转px的,会鬼使神差小数的状态,而在canvas里面。。。一不当心就报错了ctx.measureText();能够度量字符串的长短,但是不可能是数字、、、笔者那边就踩坑了,所以转成字符串

效果:

彩世界网址 5

image

彩世界网址 6

image

这么些纯css达成圆角的作用能同盟差不离全部浏览器,然则唯有本人要好能看出毛边吗?

彩世界网址 7

image

上述是此次关于IE8圆角主题素材和谐的化解聚焦,希望能帮到我们,招待指正和增加补充。

此地的 z-index 有个须求注意的地点,父必得得设置 z-index。要是不设置,那么 u-tri 会直接吐弃

3、绘制换行文字

本条须求也总算平淡无奇了吗,这里将重返值改成最终的y坐标值,相信大家也是能领略的哇

/** * @author 赵勇 * @desc canvas画文字带换行 单位 * * @param ctx canvas上下文 * @param text 需要绘制的文字文字 * @param x x轴 坐标值 * @param y y轴 坐标值 * @param lineHeight 行高 * @param maxW 文字最宽值 * @param align 文字对齐方式 * @param color 字体颜色 * @param baseline 字体基线对齐方式 * @param fontWeight 字体粗细 * * @return 最后一行的底部 y轴 坐标值 */function drawBreakText(ctx, text, x, y, size, lineHeight, maxW, align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') { size = parseInt let font = `${fontWeight} ${size}px sans-serif`; ctx.font = font; ctx.setTextAlign; ctx.setFillStyle; ctx.setTextBaseline; let textArr = text.split; const count = textArr.length; let tempText = ""; let row = []; for (let i = 0; i < count; i  ) { if (ctx.measureText.width < maxW) { tempText  = textArr[i]; } else { I--; row.push; tempText = ""; } } row.push; let i = 0; for (i; i < row.length; i  ) { ctx.fillText(row[i], x, y   i * lineHeight, maxW); } return y   i * lineHeight;}

实际落到实处逻辑正是循环全部字符,然后去看清长度,看的不是很清楚的能够cue小编

CSS:
.pieDiv {
            height: 200px;
            width: 300px;
            background-color: #5bc0de;
            -moz-border-radius:8px;
            -webkit-border-radius:8px;
            border-radius:8px;
            margin: 40px;
            behavior: url("css/PIE.htc");
        }

真机预览和微信开荒工具的同生龙活虎,把背景颜色都调成同样的,调度下地方和分寸就能够清除设计员的怨念,

4、绘制图片,然而保持比例填充

本人想在小程序里面,独有mode:aspectFill才是我们实在用的最多的啊!

/** * @author 赵勇 * @desc canvas 绘制图 mode:aspectFill 保持比例填充 * * @param ctx canvas上下文 * @param imagePath 图片url * @param sWidth 原图宽 * @param sHeight 原图高 * @param dx canvas x轴 坐标 * @param dy canvas y轴 坐标 * @param dWidth canvas 宽 * @param dHeight canvas 高 */function drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight) { //canvas与图片宽高比 var wRatio = dWidth / sWidth; var hRatio = dHeight / sHeight; //裁剪图片中间部分 if (sWidth >= dWidth && sHeight >= dHeight || sWidth <= dWidth && sHeight <= dHeight) { if (wRatio > hRatio) { ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight); } else { ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight); } } //拉伸图片 else { if (sWidth <= dWidth) { ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight); } else { ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight); } }}

以此具体看例子吗。。小编无意间写了

亟需在意的点:

IE下那一个CSS3成效落成是依靠VML,由VML绘制圆角或是投影效果的容器成分,然后这些容器成分作为指标成分的后兄弟节点插入,假若指标成分position:absolute 或是 position:relative,则那么些css3-container成分将会安装与之相似的z-index值,在DOM tree中,同级的要素总是后边的覆盖前边的,所以那样就兑现了覆盖,又幸免了可能有其它因素恰巧插入个中。所以,难点来了,假如近期成分的position属性为static,也等于默许属性,则z-index属性是未有用的,无覆盖可言,所以当时IE浏览器下CSS3的渲染是不会中标的。要缓和也相当粗略,设置指标元素position:relative或是设置祖先成分position:relative并给与叁个z-index值(不可为-1)。
htc文件路径须求时相对路线。
会给其余属性埋坑,影响别的品质的常规使用,不过为了完成效果与利益,是坑也要入。

什么是圆角的?什么是尖角的?以下图片能够比较出来:

1、绘制纯色背景

最开头并未有写那些,可是安卓真机上要求因而加上了,这些实际上便是画七个矩形,记得宽高要超过你必要绘制的宽高

/** * @author 赵勇 * @desc canvas 画纯色背景 (在iOS上不画默认白色,安卓上不画默认是透明色) * * @param ctx canvas上下文 * @param color 背景颜色 * @param width 背景宽 * @param height 背景高 * @param x 轴 坐标 * @param y 轴 坐标 * */function drawBackground(ctx, color = 'white', width = 1000, height = 3000, x = 0, y = 0) { ctx.rect(x, y, width, height) ctx.setFillStyle ctx.fill()}
css:
.ieCss3Div {
            height: 100px;
            width: 100px;
            background-color: #5bc0de;
            -moz-border-radius:8px;
            -webkit-border-radius:8px;
            border-radius:8px;
            margin: 40px;
            behavior: url("css/ie-css3.htc");
        }

彩世界网址 8

使用:

只传部分参数

canvasUtil.drawBreakText(ctx, "text", app.toPx, app.toPx;

不无参数都用上

 canvasUtil.drawBreakText(ctx, "text", app.toPx, app.toPx, app.toPx, app.toPx, app.toPx, 'left', '#999999', 'top', 'bold');
html:

<div class="ieCss3Div"></div>

彩世界网址 9

在微信小程序中生成一陈佩华报以便顾客能够大饱眼福到对象圈的作用在不菲微信小程序中都有,前些天分享一个友好写的洗练canvas工具类

如有必要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

彩世界网址 10demo.jpg

减轻方案2:ie-css3.htc

以此剧本文件也是运用比较不认为奇的消除IE上css3主题素材的方案。
动用方法同上:

.dialog{
  position: relative;
  display: inline-block;
  width: 250px;
  background-color: green;
  padding: 30px;
  z-index: 2;
}

.u-tri::before{
  position: absolute;
  left: -4px;
  top: 4px;
  content: '';
  width: 50px;
  height: 50px;
  border-style:solid;
  border-width:2px;
  border-color: red ;
  border-radius:6px;
  background-color: red;
  transform:rotate(45deg);
  z-index: -1;
}
知识点

终极保存的时候,在安卓上边有bug,正是字体大小啦,颜色啦都难堪了。。。供给在draw的时候加个300微秒左右的延时。。。。

 ctx.draw => { setTimeout => { //你的其他代码 }, 300) });

写了三个简易的demo,要求的就自取啦:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

当然,欢迎star~~~~

缓和方案3:

动用带圆角的图片,图层能够一向增多圆角图片,图片能够用定位将圆角图片覆盖到上面。
理所必然能用代码消释的大家尽量不要那样“高大上”的点子。
这么的诀要会增添服务器压力,拖慢网页进度。

web端把view标签改过为div标签就可以

使用

设若暗中同意值知足,也足以只传多个参数即:canvas的上下文

canvasUtil.drawBackground;

要改过颜色能够

canvasUtil.drawBackground(ctx, '#999999');

解决方案1:pie.htc

pie.htc算是消除IE8圆角难点对比常用的插件。海外的程序员们不会安于现状,他们连年能利用一些花招使IE浏览器也能支持CSS3的有的属性。那么些都是可怜有含义的事情,何况能有辅助才干文明的上进。
啧啧,起高了...依然回到主旨上来。直接上代码吧。

html

html:
<div class="pieDiv"></div>

彩世界网址 11

css:
#css2 {
            padding: 10px;
            background: #5bc0de;
            color: #fff;
            margin: 0;
        }

        .r_a, .r_b, .r_c, .r_d {
            background: #5bc0de;
            display: block; /*让em显示在不同的行*/
            height: 1px;
            font-size: 18px;
            overflow: hidden; /*防止溢出让em变高*/
        }

        .r_a {
            margin: 0 5px;
        }

        .r_b {
            margin: 0 3px;
        }

        .r_c {
            margin: 0 2px;
        }

        .r_d {
            margin: 0 1px;
            height: 2px;
        }

尖角的法子英特网黄金年代搜也是一大堆,在那之中有自家最欢乐的阮大神的点子,阮大神博文在那(可点击):

IE系列浏览器的申斥就不风流浪漫风流倜傥细说了。
正如折磨前端的是客商对IE8的不离不弃,以至傲娇美术职业对各个新特色的偏心。
关于IE8及以下版本浏览器不可能显示圆角,各路大神也都有有关的稿子介绍,但是仁者见仁智者见智,可完结性照旧须求结合项目做验证。此篇文章算是作为协调办事中遇见的这一个难点的一个应用方案计算汇总。

单纯正是两种情势,生机勃勃种是选拔图片再定位拼接起来使用,太轻便了切实就不详细的说了。另风流洒脱种艺术正是border来写了,尽管怎么写都以尖角的,然而小编想尝试一下。纯手写写出设计员想要的圆角吧

css

啊……我们设计员猛烈供给必定要圆角!圆角的气泡对话框,不要这种尖角的。这里面还遇上了个两难的标题,z-index不见到成效

 

 

 

彩世界网址 12

而圆角的三个思路是使用边框加上背景象使用

本文由时时app平台注册网站发布于web前端,转载请注明出处:微信小程序分享图片的简易canvas工具类【彩世界

关键词: