前端學習筆記------多張圖片生成canvas思路.md

最開始的需求是 多張圖拼成一張圖 而且長按保存

最開始的愚見：

​ 由於要等所有的圖片渲染完成在區生產canvas 我就只在最大的呢張圖片上加了onload事件

​ 這樣圖片加載慢 也能最後執行生成canvas

今天看了一個小想法，發現本身真蠢：

​ 一張張遞歸渲染到指定位置不就行了

​ 唉 果然仍是垃圾寶寶一個

draw(){
    let data = ['img_url_1','img_url_2','img_url_3','img_url_4','img_url_5']
    //數組存放url
    let canvas = document.createElement('canvas')
    // 建立canvas 畫板
    let context = canvas.getContext('2d')
    canvas.width=290;
	canvas.height=290;
	context.rect(0,0,canvas.width,canvas.height)
	//繪製空白矩形區域
	function drawing(n){
        if(m<len){
            let img = new Image;
            //img.crossOrigin = 'Anonymous'; //解決跨域
            img.src=data[n];
            img.onload=function(){
                //使用遞歸 把每一張圖一一按照位置渲染上去
			    ctx.drawImage(img,0,0,290,290);
			    drawing(n+1);//遞歸 
		    }
        }else{
			//保存生成做品圖片
			base64.push(c.toDataURL("image/jpeg",0.8));
			//alert(JSON.stringify(base64));
			fn();
		}
        drawing(0);
	}
}
複製代碼