html移动端中怎么解决生成图片问题(html,开发技术)

时间:2024-05-04 11:08:44 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    html%E7%A7%BB%E5%8A%A8%E7%AB%AF%E4%B8%AD%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E9%97%AE%E9%A2%98

1.生成图片可以用canvas,但是由于已经有了html2canvas这个开源库,所以为了节省时间就没有自己写了

LiveDemo

2.由于现在的手机都是高清屏,所以如果你不做处理就会出现模糊的情况,为什么会出现模糊的情况?这个就涉及到设备像素比 devicePixelRatio js 提供了 window.devicePixelRatio 可以获取设备像素比

这个DPR函数就是获取设备的像素比, 那获取像素比之后要做什么呢?

3.获取设备像素比之后将canavs.widthcanvas.height 去乘以设备像素比 也就是 scaleBy; 这个时候在去设置canvas.style.widthcanvas.style.heightdom的宽和高。想想为什么要这么写?最后在绘制的饿时候将所绘制的内容放大像素比倍

举个例子iphone6S是设备宽高是375 X 667 ,6S的 window.devicePixelRatio = 物理像素 / dips(2=750/375)所以设计师一般给你的设计稿是不是都是750*1334的?所以如果按照一比一去绘制在高清屏下就会模糊

4.最后调用canvas.toDataURL("image/png");赋值给image.src,由于微信里面无法保存图片,所以只能生成图片文件,调用微信自带的长按保存到图片到相册功能

本文:html移动端中怎么解决生成图片问题的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:html如何写post请求下一篇:

12 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18