讓html5 canvas畫布大小跟隨圖片做變化的問題

html5 canvas mobile web application development 手機

QQ 2019-03-23 20:23:20 ‧ 5272 瀏覽

分享至

如題
我想做一個裁切圖片的功能是一個mobile web
我用hbuilderX這個ide中提供的功能把web打包成apk裝到手機裡
但是最後我放在手機上跑的時候或在瀏覽器上用開發人員模式調成手機模式
圖片大小不能適應手機寬度
我知道只讓圖片適應寬度大小不難
但是要怎麼讓canvas的區域範圍跟著圖片一起動呢?
因為我是靠canvas的功能去把圖片的某個區域框選出來
最後畫出來
如圖 https://imgur.com/a/6VZnyTl

我的程式碼如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <title></title>
	<style type="text/css">
		div#imgarea{
			background-image: url(images/XXX.jpg);
			background-repeat: no-repeat;float: left;
		}
		canvas#pCanvas{
			cursor: pointer;
		}
		canvas#cimage{
			border: 1px dotted;
		}
	</style>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		var canvas, context, image, ccanvas , ccontext;
   		function init () {
   			ccanvas = document.getElementById("cimage");
   			ccontext = ccanvas.getContext("2d");
   			canvas = document.getElementById("pCanvas");
   			context =canvas.getContext("2d");
   			context.lineWidth=6;  			//線寬
   			context.strokeStyle='silver';	//線的顏色
   			image=new Image();
   			image.src="images/XXX.jpg";
   			
   		}
   		var startx=0,starty=0;
   		var stopx=0;
   		var stopy=0;
   		var cb=0;
		
        //觸控點擊觸發
   		function clipstart(event){
   			startx=event.touches[0].clientX;   //touches代表螢幕上所有觸摸點的列表
   			starty=event.touches[0].clientY;
   			cb=1;
			
   		}             
        //觸控結束觸發
   		function clipstop(event){
   			stopx=event.changedTouches[0].clientX;  //touchend必須要用changedTouches方法獲取clientX
   			stopy=event.changedTouches[0].clientY;
   			cb=0;				
			document.getElementById("demo1").innerHTML=stopx;
			document.getElementById("demo2").innerHTML=stopy;
   		}
        //觸控移動觸發
   		function onmove(event){
   			if (cb==1){
   				context.clearRect(0,0,canvas.width,canvas.height);
   				var h = event.touches[0].clientY - starty;
   				var w = event.touches[0].clientX - startx;
   				context.strokeRect(startx,starty,w,h);
				document.getElementById("demo4").innerHTML=h;
				document.getElementById("demo3").innerHTML=w;
				
				
   			}
   		}
        //點擊第二個canvas觸發繪圖動作 繪製 截圖在第二個canvas上
   		function drawCImage(event){
   			ccontext.clearRect(0,0,ccanvas.width,ccanvas.height);
   			var h = stopy - starty;
   			var w = stopx - startx;
   			ccontext.drawImage(image,startx,starty,w,h,0,0,w,h);
   		}
		
		
		
    </script>
</head>
<body>
	<body onload="init()">
		<div>
			<div id="imgarea" ontouchstart="myFunction()">
				<canvas id="pCanvas" width="600" height="400"
					ontouchstart="clipstart(event)"
					ontouchend="clipstop(event)"
					ontouchmove="onmove(event)"
				></canvas>
			</div>
			<div>
				<il id="demo1"></il>
				<il id="demo2"></il>
				<il id="demo4"></il>
				<il id="demo3"></il>
			</div>
			
			<div>
				<canvas id="cimage" width="600" height="400" ontouchstart="drawCImage(event)">
				</canvas>
				
			</div>
			
			
		</div>
		
		
		
		
	</body>
</body>
</html>

看更多先前的討論...收起先前的討論...

淺水員 iT邦大師 6 級 ‧ 2019-03-24 16:16:49 檢舉

這兩句看不懂：
「我知道只讓圖片適應寬度大小不難
但是要怎麼讓canvas的區域範圍跟著圖片一起動呢?」
你程式碼中不是已經指定寬度是600了，那又要怎麼隨螢幕寬度調整呢？
另外其實你也沒說自己想調整成什麼樣子

QQ iT邦新手 5 級 ‧ 2019-03-24 19:28:01 檢舉

就是圖片的寬度可以跟隨著手機寬度變化
我是想說讓canvas大小
跟著圖片一起變化就是和圖片一模一樣大
但是我不知道怎麼修改所以我只是先隨便指定一個寬度給他

fillano iT邦超人 1 級 ‧ 2019-03-25 09:23:01 檢舉

之前鐵人賽參賽的東西是用Canvas跑Powerpoint，因為Office Open XML有制定了一個長度單位（是很多種單位的公因數，方便換算），然後Powerpoint有固定的長寬比。所有的東西（位置、長寬等）都是透過Canvas的寬度、長寬比、長度單位換算出來的，所以不論Canvas大小怎麼變，都可以畫出來。你可以參考一下這樣的思路。

QQ iT邦新手 5 級 ‧ 2019-03-25 20:05:43 檢舉

我成功讓canvas的寬度可以跟著窗口做變化
但是我canvas大小一變化
裡面的圖片又會被拉伸變形

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2019-03-26 14:31:38

雖然不知道你最後的結果希望是什麼
下面是透過 js 直接調整 canvas 的長寬

<!DOCTYPE html>
<html lang="Zh-Hant">
<head>
    <meta charset="utf-8">
    <title>變更</title>
    <style>
        canvas{
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div>
        <button id='bt1'>1</button>
        <button id='bt2'>2</button>
    </div>
    <canvas id='out'></canvas>
    <script>
        let resizeTo=function(w, h)
        {
            let cvs=document.getElementById('out');
            return function(){
                cvs.width=w;
                cvs.height=h;
                //重新畫圖
                let r=Math.min(w,h)*0.45;
                let ctx=cvs.getContext('2d');
                ctx.arc(w/2,h/2,r,0,Math.PI*2,true);
                ctx.stroke();
            }
        };
        document.getElementById('bt1')
                .addEventListener('click',resizeTo(100,200));
        document.getElementById('bt2')
                .addEventListener('click',resizeTo(400,150));	
    </script>    
</body>
</html>