当前位置: 首页 > news >正文

微信小程序预览图片和H5使用canvas实现图片+蒙层+文字

1、效果

2.H5实现

<!--* @Author: limingfang* @Date: 2024-05-20 10:26:51* @LastEditors: limingfang* @LastEditTime: 2024-05-21 16:31:11* @Description: 
-->
<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Canvas Draw Image and Elements</title>  <style>body {padding: 0;margin: 0;}</style>
</head>  
<body>  <canvas id="myCanvas" width="375" height="375"></canvas>  <script>  const canvas = document.getElementById('myCanvas');  const ctx = canvas.getContext('2d');  // 加载图片  const img = new Image();  img.onload = function() {  // 绘制图片  ctx.drawImage(img, 0, 0, 375, 375); // 参数:图片对象, x坐标, y坐标, 宽度, 高度  // 绘制文本  ctx.font = '28px Arial';  ctx.fillStyle = '#767B8D';  ctx.fillText('处方药', 146, 174);  ctx.fillText('依法不展示包装', 90, 222);  ctx.filter = 'blur(5px)';// 导出为图片(可选)  const dataUrl = canvas.toDataURL('image/png');  console.log(dataUrl,'dataUrl00000000000000000000');// 你可以使用dataUrl进行进一步的操作,例如将其设置为img元素的src属性  const imgElement = document.createElement('img');  imgElement.src = dataUrl;  imgElement.style.filter = 'blur(5px)';  document.body.appendChild(imgElement);  };  img.src = './4.jpg'; // 替换为你的图片路径  img.crossOrigin = "anonymous";//添加此行anonymous必须小写</script>  
</body>  
</html>

3.小程序实现

        <swiper indicator-color="#efeff4" indicator-active-color="#f16a33" circular="true" interval="2000" duration="600" bindchange="handleSwiperChange"><block wx:for="{{ json_data.goods[0].images }}" wx:key="index" wx:for-index="index" wx:for-item="item"><swiper-item><image src="{{ filter.formattingPictureThumbnail(['750', '750'], item.img_url) }}" class="swiper-image" data-index="{{index}}"catchtap="previewMedia"mode="aspectFit" /><view catchtap="previewMedia" data-index="{{index}}" wx:if="{{json_data.medicinesIsPrescribe&&mark.markFlag}}" class="d6-goods-img-no absolute left-0 top-0 w-full text-center box-border" style="-webkit-backdrop-filter: blur({{mark.markTransparency}}px);backdrop-filter:blur({{mark.markTransparency}}px);"><view catchtap="previewMedia" data-index="{{index}}"><view catchtap="previewMedia" data-index="{{index}}">处方药</view><view catchtap="previewMedia" data-index="{{index}}">依法不展示包装</view></view></view></swiper-item></block></swiper>
/*** 绘制canvas图片+图片阴影+蒙层* @returns */initCanvasImages(){let images = this.data.json_data?.goods && this.data.json_data?.goods[0]?.images || [];if(images.length <= 0) return;let sources = [];const _this = this;if (this.data.json_data.medicinesIsPrescribe && this.data.mark.markFlag) {// 获取canvas上下文  wx.createSelectorQuery().select('#goodsCanvas').fields({node: true,size: true,}).exec((canvasRes)=>{if(canvasRes.length <= 0) return;const canvas = canvasRes[0].node;const ctx = canvas.getContext('2d');// 设置canvas的宽度和高度与图像相同  canvas.width = 375;  canvas.height = 375;  images.forEach((item,index) => {images[index] = canvas.createImage();images[index].onload = function() {// 简单模糊处理(非高斯模糊): 只是多次绘制图片来模拟模糊效果for (let i = 0; i < _this.data.mark.markTransparency; i++) { // 重复次数越多,模糊效果越明显  ctx.globalAlpha = 1 / (i + 1); // 每次绘制时降低透明度  ctx.drawImage(images[index], i, i, 375, 375); // 参数:图片对象, x坐标, y坐标, 宽度, 高度  }  // 重置透明度  ctx.globalAlpha = 0.2;  ctx.filter = `blur(${_this.data.mark.markTransparency})px`;// 绘制文本  ctx.font = '28px Arial';ctx.fillStyle = '#767B8D';ctx.fillText('处方药', 146, 168);ctx.fillText('依法不展示包装', 90, 210);const dataUrl = canvas.toDataURL('image/png', 0.5); sources[index] = {url: dataUrl,type: item.img_type === 3 ? 'image' : 'video'};// 清除画布内容  ctx.clearRect(0, 0, 375, 375); // 清除画布上的所有内容,参数是画布的宽高  };images[index].src = item.img_url;})});} else {sources = images.map(item => ({url: item.img_url,  // 图片或视频的地址type: item.img_type === 3 ? 'image' : 'video' // 需要预览的资源类型}));}this.setData({canvasImages: sources});},/*** 预览图片/video*/async previewMedia(e) {let current = e.target.dataset.index;wx.previewMedia({sources: this.data.canvasImages, // 需要预览的资源列表current // 当前显示的资源序号})},

相关文章:

  • 2019美亚
  • 【面试】谈谈常见的Java虚拟机有哪些
  • JavaScript-JavaWeb
  • 聚观早报 | 哪吒L纯电版开启预售;OPPO Pad 3获3C认证
  • opencl色域变换,处理传递显存数据
  • 【PB案例学习笔记】-13 徒手做个电子时钟
  • fast-lio2代码学习
  • GEC6818开发板的环境配置
  • AI界的“拼夕夕”登场,为上万张GPU寻找新使命
  • 磁盘管理后续——盘符漂移问题解决
  • Java进阶学习笔记21——泛型概念、泛型类、泛型接口
  • 风景园林设计乙级资质被撤销后的恢复途径
  • 生意人【着眼于未来、公私分明、有决断又有人情味、立场、享受过程】
  • 部署LAMP平台
  • web刷题记录(1)
  • Android交互
  • crontab执行失败的多种原因
  • flask接收请求并推入栈
  • HomeBrew常规使用教程
  • nodejs实现webservice问题总结
  • overflow: hidden IE7无效
  • React-redux的原理以及使用
  • Spring Boot MyBatis配置多种数据库
  • spring-boot List转Page
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 分享一份非常强势的Android面试题
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 前端
  • 问题之ssh中Host key verification failed的解决
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 最近的计划
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • 阿里云服务器购买完整流程
  • 通过调用文摘列表API获取文摘
  • #ifdef 的技巧用法
  • (09)Hive——CTE 公共表达式
  • (1)(1.13) SiK无线电高级配置(五)
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (6)添加vue-cookie
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (四)事件系统
  • (推荐)叮当——中文语音对话机器人
  • (学习日记)2024.01.09
  • (一)Neo4j下载安装以及初次使用
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)创业的注意事项
  • (转)关于多人操作数据的处理策略
  • .net core 6 使用注解自动注入实例,无需构造注入 autowrite4net
  • .Net FrameWork总结
  • .NET IoC 容器(三)Autofac