導航:首頁 > 文件處理 > html5canvas圖片壓縮

html5canvas圖片壓縮

發布時間:2022-11-27 07:18:38

⑴ 求助一下各位大大html5 canvas 縮放的時候會出現鋸齒

canvas畫出來的圖片是點陣圖,點陣圖在放大的情況下是會模糊的,然而你所說的「縮放」應該是在canvas寬高固定後通過改變其style樣式表進行放大縮小,當然圖片是放大了,可是也模糊了,因為不是矢量圖呀。

⑵ 前端把圖片壓縮轉換成base64編碼把值賜予input='hidden' 之後提交給後台. HTML5,PHP,javascript,canvas

缺點你無法直接驗證傳來的base64數據的完整性,比如大小,文件頭之類的,還需要自己來實現。

⑶ html5之canvas困惑

canvas相當於一張圖片,css設置的屬性相當於對這張圖片進行拉伸變化。要改變canvas的大小,應當用這種方式
<canvas width=500 height=400></canvas>
對應的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;

換句話說,你現在畫出的1px的線條實際顯示的是在默認大小上經過拉伸變換的樣子。

⑷ HTML5中canvas圖片載入的問題

getImageData方法不支持file協議,確定本地啟了服務。另外最好把控制台的錯誤代碼貼出來,這樣方便大家找bug。

⑸ html5的canvas怎麼調整畫圖的清晰度

不光繪制圖片,在高分屏下,繪制文字和線條都會出現模糊的現象,GitHub上有一個hidpi-canvas-polyfill可以很好的解決這個問題,但是沒有對圖片進行處理。如果你了解了原因,解決這個問題也很容易。
首先,引入上方這個polyfill;
然後,得到devicePixelRatio和backingStorePixelRatio的比例,可以使用下面的方法

var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};

//調用
var ratio = getPixelRatio(ctx);

之後,在調用ctx.drawImage()的時候,給width和height乘以ratio,如下:

1

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);

⑹ html5怎麼壓縮圖片

利用canvas的drawImage方法來繪制圖片,並且設置繪制的圖片的width跟height,最後再通過canvas的toDataURL方法來生成壓縮後的dataUR

下面直接上代碼:

html:

[html]view plain

⑺ html5 canvas問題

原因是你瀏覽器卡,圖片沒讀出來,等一會就行了,或者用我寫的代碼

<!DOCTYPE HTML>
<html>
<body>
<head>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

window.onload = function(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="http://www.w3school.com.cn/i/eg_flower.png";
cxt.drawImage(img,0,0);
}
</script>
</head>
</body>
</html>

⑻ html5 canvas在img標簽的圖片上繪制矩形框、矩形框為1px時線條模糊問題

前端需要在後端返回的圖片集合里,根據提供的對角線坐標繪制矩形。矩形可能是多個。效果達到如下:

1、根據後端返回的圖片list,生成canvas畫布,
2、把圖片畫到canvas裡面,再根據後端返回的坐標,在canvas里畫矩形框。
此項目中,後端返回的坐標是基於縮略圖的,但是前端渲染在頁面上的圖片,會按寬為788px來顯示,所以坐標應該要按照比例來算。
真實的左上x點的計算方式為:真實寬 / 壓縮寬 * 壓縮x點

https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html

https://www.imooc.com/wenda/detail/551496

https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501

①畫矩形時,如果裡面的參數有不是整數的話,容易導致邊框粗細不一等問題。
②當矩形的邊框lineWidth設置為1px時候,會出現線條模糊的問題。
關於第②個問題的延申:
這是測試提給我的bug:

我的思路存在的問題:
首先,同樣是矩形的邊框我同樣設置的都是1px,不應該有的線條顏色深,有的顏色淡啊,排除了參數沒有取整的問題後,我懷疑了顏色red在畫布上的渲染問題,換成十六進制的同樣有問題。就在我一籌莫展的時候,我叫來了小夥伴,我說你看這線條顏色是不是不一樣,我開始懷疑我的眼神有問題。小夥伴說,你給線條整粗點看看這問題明顯嗎。我把邊框線條設置了2px,發現和1px的粗細是一樣的,並且顏色一樣了線條不模糊了。換成別的寬度,只要不是1px都沒有問題了。
思維的問題在於,我網路問題的描述有問題,我之前一直搜canvas繪制矩形線條深淺不一,我應該搜canvas矩形線條模糊。我排查問題的時候,固定思維模式覺得1px寫的沒錯,卻沒有嘗試排查。

關於這個問題的詳細解答與解決辦法:
canvas1px線條模糊

我的理解
canvas的線條畫法不一樣,canvas的每條線都有一條無限細的「中線」,線條的寬度是從中線向兩側延伸的,也就是說canvas繪制1px的時候,是中線向左右兩邊延申各取0.5,並不是向某一邊延申(如果只是往右延申就不再是問題了),此時問題出現了,計算機不允許出現小於1px的圖形,所以他做了一個折中的事:把這兩個像素都繪制了。所以,如此一來,本來1px的線條,就成了看起來2px寬的線條。

延申:
HTML 5 Canvas詳細講解 ———— 第二篇(清除canvas畫布上指定區域+橡皮擦功能實現;在畫布上平鋪指定圖片;在畫布上繪制文本;總結案例之刮刮樂功能實現)

⑼ HTML5如何通過canvas,把兩張圖片繪制到畫布,然後導出大圖

<imgsrc="......."id="img1"/>
<imgsrc="......."id="img2"/>
<imgid="img3"/>
varimg1=document.getElementById("img1"),
img2=document.getElementById("img2"),
img3=document.getElementById("img3");
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=img1.naturalWidth+img2.naturalWidth;
canvas.height=Math.max(img1.naturalHeight,img2.naturalHeight);

//將img1加入畫布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);

//將img2加入畫布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);

//將畫布內容導出
varsrc=canvas.toDataURL();
img3.src=src;
<p>drawImage的使用方法可以去這里看一下</p>
<ahref="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage"/>

⑽ 如何使用HTML5 Canvas動態的繪制拓撲圖

//需要自己引入jQuery
<!DOCTYPEhtml><html><head>
<scripttype="text/javascript"src="jquery-3.0.0.js"></script>
<scripttype="text/javascript">

//是否可以進行直線標記
varflag=false;
//是否可以進行圓圈標記
varflag1=false;
//是否可以進行文字標記
varflag2=false;
//標記的開始坐標
varx1=-10000;
vary1=-10000;
//標記的結束坐標
varx2=-10000;
vary2=-10000;

//查找所有圖片,動態創建畫布
functionnewCanvas(){
//查找所有圖片,並且生成畫布
$("#body").find("img").each(function(i,e){
//獲取圖片長度寬度
varimgWidth=$(this).attr("width");
varimgHeight=$(this).attr("height");

//根據圖片動態創建畫布
varcanvas=document.createElement("canvas");
canvas.width=imgWidth;
canvas.height=imgHeight;
canvas.id="canvas"+i;
$(canvas).css("border","1pxsolid#d3d3d3");
document.getElementById("myCan").appendChild(canvas);

//獲取畫布
varc=document.getElementById("canvas"+i);
varctx=c.getContext("2d");

//給畫布繪制圖片
varimgId=$(this).attr("id");
varimg=document.getElementById(imgId);
$(img).ready(function(){
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}


//動態清空所有畫布
functionclearCanvas(){
//查找所有圖片,並且清空畫布
$("#body").find("img").each(function(i,e){
//獲取圖片長度寬度
varimgWidth=$(this).attr("width");
varimgHeight=$(this).attr("height");
//獲取圖片元素
varimg=e;

//查找所有畫布
$("#body").find("canvas").each(function(i,e){

//獲取畫布
varc=e;
varctx=c.getContext("2d");

//繪制一個純白色畫布
ctx.clearRect(0,0,imgWidth,imgHeight);
//重新將原圖片加入到畫布中
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}

//動態獲取所有畫布的Base64壓縮數據
functionCanvas(){
//查找所有畫布
$("#body").find("canvas").each(function(i,e){
varcanvas=e;
vardataURL=canvas.toDataURL();
varb64=dataURL.substring(22);
console.log(b64);
console.log("**********************************************");
});
}


$(document).ready(function(){

//查找所有圖片,動態創建畫布
newCanvas();

//標記按鈕
$("#mark").click(function(){
flag=true;
});
//圓圈按鈕
$("#circle").click(function(){
flag1=true;
});
//清空按鈕
$("#clear").click(function(){
//動態清空所有畫布
clearCanvas();
});
//字體按鈕
$("#writeFont").click(function(){
flag2=true;
});
//獲取base64壓縮數據
$("#getData").click(function(){
//動態獲取所有畫布的Base64壓縮數據
Canvas();
});
//給頁面所有畫布設置點擊事件
$(document).find("canvas").each(function(i){
$(this).bind("click",mouseMove);
});

//畫布繪制標記
functionmouseMove(event){
varid=$(this).attr("id");
varc=document.getElementById(id);
varctx=c.getContext("2d");
//如果激活了直線標記按鈕
if(flag){
//獲取點擊位置的相對坐標
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;
if(x1==-10000&&y1==-10000){
//還未進行選擇開始位置的坐標
x1=x;
y1=y;
}elseif(x2==-10000&&y2==-10000){
//還未進行選擇結束位置的坐標
x2=x;
y2=y;

//繪制標記
//必須開啟beginPath,否則可能會出現之前繪制過的線條
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
//必須釋放closePath
ctx.closePath();
//初始化
flag=false;
x1=-10000;
y1=-10000;
x2=-10000;
y2=-10000;
}else{
alert("瀏覽器異常,請按F5刷新頁面重新標記!");
}
}else{
//alert("請先點擊標記按鈕再進行標記!");
}

//如果激活了圓圈按鈕
if(flag1){
//獲取點擊位置的相對坐標
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;
//繪制圓圈標記
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//初始化
flag1=false;
}

//如果激活了文字標記按鈕
if(flag2){
//獲取點擊位置的相對坐標
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;

varuser=window.prompt("請輸入標記內容","");
//確定
if(user){
//繪制文字標記
ctx.font="16pxArial";
ctx.fillText(user,x,y);
}
//初始化
flag2=false;
}

}

//獲取滑鼠點擊畫布區域中的相對位置坐標
functiongetXAndY(event,clickDom){
//滑鼠點擊的絕對位置
Ev=event||window.event;
varmousePos=mouseCoords(event);
varx=mousePos.x;
vary=mousePos.y;
//alert("滑鼠點擊的絕對位置坐標:"+x+","+y);

//獲取canvas畫布在body中的絕對位置
varx1=$(clickDom).offset().left;
vary1=$(clickDom).offset().top;
//alert("畫布在body中的絕對位置坐標:"+x1+","+y1);

//滑鼠點擊位置的相對於canvas畫布的坐標
varx2=x-x1;
vary2=y-y1;
//alert("畫布在body中的相對位置坐標:"+x2+","+y2);
return{x:x2,y:y2};
}

//獲取滑鼠點擊畫布區域中的絕對位置坐標
functionmouseCoords(event){
if(event.pageX||event.pageY){
return{x:event.pageX,y:event.pageY};
}
return{
x:event.clientX+document.body.scrollLeft-document.body.clientLeft,
y:event.clientY+document.body.scrollTop-document.body.clientTop
};
}

});
</script></head><bodyid="body">
<divid="myCan">
<p>Imagetouse:</p>
<imgid="scream"src="test.jpg"alt="TheScream"width="200"height="200"/>
<imgid="scream1"src="test.jpg"alt="TheScream"width="200"height="200"/>
<p>Canvas:</p>
</div>
<inputid="mark"type="button"value="標記"/>
<inputid="circle"type="button"value="圈記"/>
<inputid="writeFont"type="button"value="文字"/>
<inputid="clear"type="button"value="清空"/>
<inputid="getData"type="button"value="圖片生成Base64壓縮數據"/></body></html>

閱讀全文

與html5canvas圖片壓縮相關的資料

熱點內容
主角叫楚天的都市小說 瀏覽:754
程序員三重境界 瀏覽:871
菜雞方舟上怎麼開伺服器 瀏覽:727
馬林固件編譯錯誤 瀏覽:910
市場營銷案例pdf 瀏覽:770
魔爪閱讀網 瀏覽:19
app地推業績統計在哪裡 瀏覽:993
維語電影網站大全 瀏覽:958
程序員骨腫瘤上熱搜 瀏覽:847
聚優電影 瀏覽:45
國企保底工資演算法 瀏覽:730
視聽說伺服器地址是什麼意思 瀏覽:657
一部男主叫大志的電影叫 瀏覽:650
安卓反編譯後編譯不回來 瀏覽:195
快穿肉文推薦 瀏覽:263
lol新手推薦什麼伺服器 瀏覽:283
尼桑奇駿壓縮機 瀏覽:170
android模態對話框 瀏覽:793
手機為什麼無法接到伺服器 瀏覽:627
背景虛化人物清晰哪個app 瀏覽:657