搜索到
1061
篇与
的结果
-
uniapp实现滑动指定位置显示顶部导航 uniapp实现滑动指定位置显示顶部导航，通过监听页面滚动位置，进行判断是否展示，是的话就增加class名称on1、在顶部导航加入配置： :scroll-top="scrollTop" 和 scroll="onPageScroll"<template> <!--index.wxml--> <view class="container" :scroll-top="scrollTop" scroll="onPageScroll"> <view :class="!showNavbar ? 'home_head' : 'home_head on'"> <view class="home_head_search"> <image src="https://www.tpxhm.com/static/home_head_search.png"></image> <view class="">想搜点什么呢</view> </view> </view> </view> </template>2、逻辑方法：在data里面新增变量showNavbar:false，并新增onPageScroll方法，监听页面滚动，判断滚动位置<script> export default { data() { return { showNavbar: false, } }, onPageScroll: function (e) { // console.log( e.scrollTop) let showNavbar = e.scrollTop > 100; // 滚动超过100px显示导航栏 this.showNavbar = showNavbar this.scrollTop = e.scrollTop }, } </script> -
js canvas如何实现圆角图片头像 最近在做中秋国庆海报，在获取用户微信头像的时候，发现设计稿用的是圆形头像，百度找了一些，整合了自己的代码，分享给大家，供大家参考。html部分代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>海报</title> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> <style> .app{ width: 100%;max-width: 750px; height: auto; top: 0; bottom:0;position:fixed;overflow-y:scroll;overflow-x:hidden;z-index: 222; background: #fff; display: none } .app img{margin-top: 0.5rem; width: 96%; height: auto;} </style> <div id="app"></div> </body> </html>js代码：<script> let canvas = document.createElement('canvas') canvas.width = "1024" //创建画布，并设置宽高 canvas.height = "1372" //创建画布，并设置宽高 let ctx = canvas.getContext("2d") let wx_img = './tx.jpg'; //用户头像 var bgImg = './bg.jpg'; //背景图片 loadImg([ bgImg, wx_img, ]).then(([img1, img2])=> { ctx.drawImage(img1, 0, 0, 608, 1080) //画布上先绘制背景图` drawRoundRect(ctx,100,268,549, 72,72,img2); //绘制头像 imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API` let img3 = new Image() $('#app').fadeIn(); document.getElementsByClassName("app")[0].append(img3) img3.src = imageURL canvas.style.display = "none" }); // 画圆形头像方法 // 对象 - 半径 - x轴距离 一y轴距离 -头像宽度 - 头像高度 -图片地址 function drawRoundRect (ctx,r,x,y,w,h,img) { ctx.save() if (w < 2 * r) r = w / 2 if (h < 2 * r) r = h / 2 ctx.beginPath() ctx.moveTo(x+r, y) ctx.arcTo(x+w, y, x+w, y+h, r) ctx.arcTo(x+w, y+h, x, y+h, r) ctx.arcTo(x, y+h, x, y, r) ctx.arcTo(x, y, x+w, y, r) ctx.closePath(); ctx.clip() ctx.drawImage(img, x, y, w, h) ctx.restore() // 返回上一状态 } //判断图片是否加载成功 function loadImg(src) { let paths = Array.isArray(src) ? src : [src] let promise = paths.map((path) => { return new Promise((resolve, reject) => { let img = new Image() img.setAttribute("crossOrigin", 'anonymous') img.src = path //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源 img.onload = () => { resolve(img) } img.onerror = (err) => { alert('图片加载失败') } }) }) return Promise.all(promise) } </script>效果展示：
-
canvas实现文字自动换行，段落居中,单行的时候居中 canvas实现文字自动换行，段落居中,单行的时候居中方法，主要用到以下方法：/****绘制自动换行的字符串****/ //ctx_2d getContext("2d") 对象 //lineheight 段落文本行高 //bytelength 设置单字节文字一行内的数量 //text 写入画面的段落文本 //startleft 开始绘制文本的 x 坐标位置（相对于画布） //starttop 开始绘制文本的 y 坐标位置（相对于画布） //ctx_fillStyle 字体颜色 //ctx_font 字体 //istrue 是否设置 function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop,ctx_fillStyle,ctx_font,istrue){ function getTrueLength(str){//获取字符串的真实长度（字节长度） var len = str.length, truelen = 0; for(var x = 0; x < len; x++){ if(str.charCodeAt(x) > 128){ truelen += 2; }else{ truelen += 1; } } return truelen; } function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置 var len = str.length, tlen = len, nlen = 0; for(var x = 0; x < len; x++){ if(str.charCodeAt(x) > 128){ if(nlen + 2 < leng){ nlen += 2; }else{ tlen = x; break; } }else{ if(nlen + 1 < leng){ nlen += 1; }else{ tlen = x; break; } } } return tlen; } if(text.length<17 && istrue==1){ ctx_2d.textAlign="center"; }else{ if(istrue==1){ ctx_2d.textAlign=""; startleft=130; } } for(var i = 1; getTrueLength(text) > 0; i++){ var tl = cutString(text, bytelength); ctx_2d.fillStyle= ctx_fillStyle; //字体颜色 ctx_2d.font= ctx_font; //字体 ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop); text = text.substr(tl); } }调用方法：let canvas = document.createElement('canvas') canvas.width = "608" canvas.height = "1080" //创建画布，并设置宽高 let ctx = canvas.getContext("2d") var ctName = "我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字" // 对象 - 行高 - 文字一行内的数量 -文本 - x 坐标位置 -y writeTextOnCanvas(ctx,30,500,ctName,263,979,'#fff','normal 18px Microsoft YaHei',0); //名字 +头衔说明：这个方法采用设置文字区块的宽度，来达到文字版块居中，另一方面考虑文字不到一行的情况下，通过以下方法判断，给文字加居中选项 if(text.length<17 && istrue==1){ ctx_2d.textAlign="center"; }else{ if(istrue==1){ ctx_2d.textAlign=""; startleft=130; } }此判断文字个数是否达到指定个数，达到的话就移除textAlign="center"文字居中属性，否则就增加textAlign="center"属性，并设置距离y轴距离。
-
canvas画布生成头像报错file.php:136 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRen问题 file.php:136 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRen出现这个问题原因：这是因为drawImage（）向canvas导入的图片跨域而导致的。解决方法：var img=new Image; img.crossOrigin="anonymous"; //关键 img.src="https://www.tpxhm.com/fdetail/图片地址";在引用加载图片之前打开跨域资源允许权限（一定要注意顺序）function loadImg(src) { let paths = Array.isArray(src) ? src : [src] let promise = paths.map((path) => { return new Promise((resolve, reject) => { let img = new Image() img.setAttribute("crossOrigin", 'anonymous') img.src = path //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源 img.onload = () => { resolve(img) } img.onerror = (err) => { alert('图片加载失败') } }) }) return Promise.all(promise) }loadImg([ wx_img+'0', './icon.png', ]).then(([img1, img2])=> { ctx.drawImage(img1, 0, 0, 600, 600) //画布上先绘制人物图` ctx.drawImage(img2, 0, 0, 600, 600) //再绘制二维码图，根据设计图设置好坐标。` imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API` let img3 = new Image() document.getElementsByClassName("app")[0].append(img3) img3.src = imageURL canvas.style.display = "none" $("#app").append(" <p>长按图片保存</p>") });
-
canvas生成表单海报 我们有时需要输入表单生成图片，可以使用下面方法生成海报<div class="dd"> <img src="https://www.tpxhm.com/fdetail/images/bg2021.jpg" alt=""> <input type="text" class="username" id="username"> <input type="text" class="tel" maxlength="11" id="tel"> <input type="text" class="num" id="num"> <input type="text" class="time" id="time"> <button type="button" class="save" onclick="save()">提交生成</button> </div> <div id="app" class="app"> <div id="appmin" class="appmin"> </div> </div>js部分代码<script> function save(){ let canvas = document.createElement('canvas') canvas.width = "1080" canvas.height = "1920" //创建画布，并设置宽高 let ctx = canvas.getContext("2d") //背景图 var bgImg = './images/bg2021.jpg'; //随机背景图 var username = $('#username').val(); var tel = $('#tel').val(); var num = $('#num').val(); var time = $('#time').val(); loadImg([ bgImg ]).then(([img1])=> { ctx.drawImage(img1, 0, 0, 1080, 1920) //画布上先绘制背景图` //文字大小 ctx.font="52px Microsoft YaHei"; //字符str //位置100,100 ctx.fillText(username,266,920); ctx.fillText(tel,266,1050); ctx.fillText(num,326,1170); ctx.font="45px Microsoft YaHei"; ctx.fillText(time,370,1290); imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API` let img3 = new Image() $('#app').fadeIn(); document.getElementsByClassName("appmin")[0].append(img3) img3.src = imageURL canvas.style.display = "none" $("#appmin").append(" <p>生成成功！长按图片保存</p><img src='https://www.tpxhm.com/fdetail/images/close.png' class='close' onclick='colse()'/>") }); } function loadImg(src) { let paths = Array.isArray(src) ? src : [src] let promise = paths.map((path) => { return new Promise((resolve, reject) => { let img = new Image() img.setAttribute("crossOrigin", 'anonymous') img.src = path //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源 img.onload = () => { resolve(img) } img.onerror = (err) => { alert('图片加载失败') } }) }) return Promise.all(promise) } function colse(){ $("#appmin").html('') $("#app").fadeOut(); } </script>这里生成1080*1920的海报，图片做背景，其他设置可以根据自己来设置。
