【 VUE 】 vue html 2 canvas 캡 처 사용
3451 단어 작업 노트
하루 종일 html 2 canvas 의 깊 은 구 덩이 를 밟 았 더 니, 마침내 고장 이 나 지 않 았 다.
문제: 1. 일부 http 그림 (아 리 클 라 우 드 의 그림 을 업로드 합 니 다. 왜 그런 지 모 르 겠 습 니 다. 백 엔 드 는 모두 열 려 있 지 않 습 니 다) 을 해결 할 수 없습니다. 크로스 도 메 인 문 제 를 해결 할 수 없습니다. 캔버스 에 실현 할 수 없습니다. 마지막 으로 base 64 그림 으로 전환 해 야 표시 할 수 있 습 니 다. 2. 데이터 가 모두 불 러 온 후에 setTimeout 개 300 을 실행 하고 렌 더 링 캡 처 3, 페이지 새로 고침 을 시작 합 니 다. 가끔 상단 에 흰색 변 이 나타 날 때 가 있 습 니 다.가끔 은 없어 요. backgroundColor: null (흰 테 두 리 를 제거) 에 소 용 없어 요. 마지막 에 logging: true (로그 기록) 를 더 해서 흰 테 두 리 를 나타 내지 않 았 어 요 ~ (저도 취 했 지만 사용 할 수 있 으 면 좋 겠 어 요 ~ over) 4. 렌 더 링 과정 에서 페이지 를 굴 릴 수 없어 요. 그렇지 않 으 면 완전 하지 않 아 요.저 는 페이지 오른쪽 에 고정 되 어 있 습 니 다. 렌 더 링 하기 전에 페이지 를 굴 릴 수 없 게 합 니 다.
외부 도입:
1. 설치
npm install html2canvas
2. 페이지 에 도입
import html2canvas from 'html2canvas';
{{Info.nickName}}
export default {
name: 'BusinessInformation',
data() {
return {
QRUrl: '',
LOGOUrl: '',
dataURL: ''
}
},
created() {
this.getUserInfo()
},
methods: {
// dom canvas
makeImg() {
var that = this
var opts = {
logging: true, // ( )
allowTaint: true, //
backgroundColor: null, //
useCORS: true // ,
}
// eslint-disable-next-line no-undef
html2canvas(that.$refs.imageWrapper, opts).then((canvas) => {
var url = canvas.toDataURL('image/png')
that.dataURL = url
})
},
// http base64,
getBase64Image(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
var dataURL = canvas.toDataURL('image/png') // image/jpeg
return dataURL
},
main(src) {
var that = this
var image = new Image()
image.src = src + '?v=' + Math.random() //
image.crossOrigin = '*' //
image.onload = function() {
that.LOGOUrl = that.getBase64Image(image)
}
},
// html2canvas
uploadQR() {
var a = document.createElement('a')
a.href = this.dataURL
a.download = ' '
a.click()
},
//
async getUserInfo(params) {
const { data } = await getInfo(params)
this.main(data.iconUrl) // logo base64,
setTimeout(function() {
that.makeImg() // ,
}, 300)
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[난치병] 시스템 시간이 잘못되어 SSL 연결이 실패했습니다.우리 안드로이드 박스의 클라이언트는 매번 첫 번째 서버에 연결할 때마다 ssl 오류가 발생하여 연결이 실패합니다. SSL_connect error:00000001:lib(0):func(0):reason(1) 네트워크...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.