如題
我想做一個裁切圖片的功能 是一個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>
已邀請的邦友 {{ invite_list.length }}/5
雖然不知道你最後的結果希望是什麼
下面是透過 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>
iThome鐵人賽
看影片追技術