实现微信对话框的图片样式以及图片边框

2025-05-31 21:53:12

1、细心的前端们会发现如果你在微信里发一张和你当前背景一样的图片,那么微信的会给这张图片加边框,并且,右边的小三角是根据图片的位置截取的。很多前端会用backgroud或者clip-path来画,这样画出来的没法设置小边框。 所以需要我们“万能”的canvas!canvas!canvas!

实现微信对话框的图片样式以及图片边框实现微信对话框的图片样式以及图片边框

4、然后就抠出了自己想要的图形,然后用你的图片填充就ok啦。填充之前按照我们最爱的UI给的尺寸等比例放大缩小if (w >= h && w > size) { //宽 > 高width = size;height = size / w * h;} else if (w < h && h > size) {height = size;width = size / h * w;}填充就用我们的canvas的API drawImagectx.drawImage(img, 0, 0,w1,h1);

实现微信对话框的图片样式以及图片边框

5、;不论你的原图是多少像素,都会实现按照w1,h1的大小重绘,所以你右键下载一下对比之前原图的大小就会发现!!压缩了图片!!!所以顺便学习了压缩图片,很棒棒吧~~~

实现微信对话框的图片样式以及图片边框
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢