在开发中经常遇到的一些问题总结
在开发页面过程中,经常遇到一些问题只能自己百度找答案。这个为了记录方便自己查询。
文本居中对齐方式:设置text-align:center;
设置行高line-height;
块级元素对齐方式:margin:0 auto
如果只有文本的情况下直接设置行高,这样就是居中对齐了;
.enter{
position: fixed;
bottom: 0;
width: 100%;
line-height: 98rpx;
text-align: center;
background: #00b050;
color: white;
font-size: 36rpx
}
h5页面长按保存图片
在度娘找了大半天,终于解决了这个问题,下面是保存图片的js代码,主要是通过canvas将图片画出来在进行保存,开发中遇到的问题canvas默认加载的时候没有画出动态加载的图片,我的解决办法是加了个touchstart
事件,判断第一次触摸时生成图片。
function copyImg() {
flag = false;
console.log('开始打印')
timeOutEvent = 0;
let self = this
let inviteBox = document.getElementById("findBox")
let canvas = document.createElement("canvas")
canvas.width = 770 // 最终图片宽度280px的2倍,以px为单位
canvas.height = 1334 // 最终图片高度315px的2倍,以px为单位
let opts = {
canvas: canvas, // 将自定义canvas作为配置项
useCORS: true, // 允许图片跨域
height: self.offsetHeight // 修复截图不完整问题
}
html2canvas(inviteBox, opts).then((canvas) => {
console.log(canvas)
/* 此处的base64ImgSrc就是得到的img的base64字符串,直接在页面上显示即可 */
let base64ImgSrc = canvas.toDataURL("image.png")
let img = document.createElement("img")
img.src = base64ImgSrc
document.body.appendChild(img)
img.setAttribute('id', 'addImg')
})
}
$(function () {
if (flag) {
$("#findBox").on('touchstart', function (e) {
console.log('go')
copyImg()
e.preventDefault();
})
}
});
将视频第一帧作为封面的方法怎么解决?
思路也是通过canvas画出第一帧的图片。
这个是目前遇到的一个问题,在微信开发者工具中可以看到生成的图片,但是手机上就是无法呈现出图片,希望有人能解决下我的问题
$('#body' + j)[0].addEventListener('loadeddata', function (e) {
// 拿到图片
var obj = e.target
console.log(e)
console.log(obj)
var scale = 0.8;
let canvas = document.createElement('canvas');
canvas.width = obj.videoWidth * scale;
canvas.height = obj.videoHeight * scale;
canvas.getContext('2d').drawImage(obj, 0, 0, canvas.width, canvas.height);
let src = canvas.toDataURL('image/png');
console.log('1' + src)
obj.setAttribute('poster', src);
// obj.pause()
// $('#bodypic').append(' <img src='+src+' alt="">')
that.imgUrl = src
});