A. 關於利用canvas截取圖片的問題
取得imgData數據後,創建一個新的CANVAS把數據寫進去。然後保存。
B. 通過js保存圖片到本地中遇到的跨域問題
<html>
<metahttp-equiv="X-UA-Compatible"content="chrome=1">
<head>
<script>
window.onload=function(){
draw();
varsaveButton=document.getElementById("saveImageBtn");
bindButtonEvent(saveButton,"click",saveImageInfo);
vardlButton=document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton,"click",saveAsLocalImage);
};
functiondraw(){
varcanvas=document.getElementById("thecanvas");
varctx=canvas.getContext("2d");
ctx.fillStyle="rgba(125,46,138,0.5)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle="rgba(0,146,38,0.5)";
ctx.fillRect(58,74,125,100);
ctx.fillStyle="rgba(0,0,0,1)";//blackcolor
ctx.fillText("Gloomyfish-Demo",50,50);
}
functionbindButtonEvent(element,type,handler)
{
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else{
element.attachEvent('on'+type,handler);
}
}
functionsaveImageInfo()
{
varmycanvas=document.getElementById("thecanvas");
varimage=mycanvas.toDataURL("image/png");
varw=window.open('about:blank','imagefromcanvas');
w.document.write("<imgsrc='"+image+"'alt='fromcanvas'/>");
}
functionsaveAsLocalImage(){
varmyCanvas=document.getElementById("thecanvas");
//tion.
//varimage=myCanvas.toDataURL("image/png").replace("image/png","image/octet-stream;Content-Disposition:attachment;filename=foobar.png");
varimage=myCanvas.toDataURL("image/png").replace("image/png","image/octet-stream");
window.location.href=image;//itwillsavelocally
}
</script>
</head>
<bodybgcolor="#E6E6FA">
<div>
<canvaswidth=200height=200id="thecanvas"></canvas>
<buttonid="saveImageBtn">SaveImage</button>
<buttonid="downloadImageBtn">DownloadImage</button>
</div>
</body>
</html>
好像這個可以 不錯 你試一試吧 把下載下來的文件 重命名 為 圖片格式 就可以預覽啦
C. 如何用js新建一個canvas
用js新建canvas的方法如下:
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
document.body.appendChild(canvas);
注意:此處一定要追加到body裡面。
D. 前端pdf圖片轉canvas展示問題
可能是圖片格式有問題。
canvas可以載入的圖片會根據類型讀取,如果圖片格式不正確,可能會導致顯示異常。
可以使用圖片軟體打開圖片看看是否正常,或者用軟體轉換一下。
E. web前端中 對於canvas了解多少
Canvas的繪制模型
有的時候使用Canvas,你得對它有一個很好的理解才行,這包括了Canvas究竟是如何繪制圖形、圖像和文本的。要想了解這部分內容,則需要理解陰影、Alpha通道、剪輯區域及圖像合成等內容。
在向Canvas之上繪圖形或圖像時,瀏覽器要按照如下步驟操作:
1>將圖形或圖像繪制到一個無限大的透明點陣圖中,在繪制時遵從當前的填充模式、描邊模式以及線條樣式。
2>將圖形或圖像的陰影繪制到另外一幅點陣圖中,在繪制時使用當前繪圖環境的陰影設定。
3>將陰影中每一個像素的alpha分量乘以繪圖環境對象的globalAlpha屬性值。
4>將繪有陰影的點陣圖與經過剪輯區域剪切過的canvas進行圖像合成。在操作時使用當前的合成模式參數。
5>將圖形或圖像的每一個像素顏色分量,乘以繪圖環境對象的globalAlpha屬性值 。
6>將繪有圖形或圖像的點陣圖,合成到當前經過剪輯區域蕭索的canvas點陣圖之上,在操作時使用當前的合成操作符。
F. 前端筆記 — canvas
在HTML中添加<canvas>元素,必須設置width跟height屬性
如果瀏覽器不支持canvas元素,就會顯示標簽中間的內容
要在畫布上繪圖,需要取得繪圖上下文,調用getContext('2d')就可以取得canvas的2d上下文
使用toDataURL方法可以導出canvas上繪制的圖像,接受一個參數,圖像的MIME類型格式
常用的屬性控制
矩形是唯一一種可以直接在上下文中繪制的形狀
與矩形有關的方法包括fillRect()、strokeRect()和clearRect(),這三個方法接受4個參數(x, y, width, height)
fillRect()繪制的矩形會填充指定的顏色,顏色通過fillStyle屬性指定
strokeRect()繪制的矩形會使用指定的顏色描邊,描邊顏色通過strokeStyle屬性指定
clearRect()方法用於清除畫布上的矩形區域
要繪制路徑,首選必須調用beginPath()方法,表示開始繪制新路徑,繪制路徑主要有以下方法
調用closePath()可以將路徑的起點與終點連接。路徑完成後,可以使用fill()填充,或者使用stroke()描邊。最後還可以調用clip(),在路徑上創建一個剪切區域
繪制文本主要有兩個方法,fillText()和strokeText(),這個兩個方法接受4個參數:要繪制的文本字元串、x坐標、y坐標和可選的最大像素寬度。這兩個方法都以下列3個屬性為基礎
上下文提供了輔助確定文本大小的方法measureText(),這個方法接受一個參數,即要繪制的文本,返回一個TextMetrics對象,這個對象有一個width屬性,表示文本的寬度
為上下文應用變換,會導致使用不同的變換矩陣應用處理,從而產生不同的結果,可以通過如下方法來修改變換矩陣
如果想把一副圖像繪制到畫布上,可以使用drawImage()方法,調用這個方法時,可以使用三種不同的參數組合,最簡單的方式是傳入一個<img>元素,以及繪制該圖像的起點x和y坐標
可以多傳入兩個參數,表示目標寬度和高度
還可以把圖像中的某個區域繪制到上下文中,需要傳入9個參數:要繪制的圖像、源圖像的x坐標、源圖像的y坐標、源圖像的寬度、源圖像的高度、目標圖像的x坐標、目標圖像的y坐標、目標圖像的寬度、目標圖像的高度
除了給drawImage()方法傳入<img>元素外,還可以傳入另一個<canvas>元素作為其第一個參數。結合drawImage()和其他方法,可以對圖像進行各種基本操作,操作的結果可以通過toDataURL()方法獲得,toDataURL()是canvas的方法而不是上下文的方法
上下文會根據以下幾個屬性,自動為形狀或路徑繪制陰影,需要在繪制路徑之前設置
漸變有CanvasGradient實例表示,要創建一個新的線性漸變,可以調用createLinearGradient()方法,接受4個參數:startX、startY、endX、endY。創建漸變後,使用addColorStop()方法來指定色標,接受兩個參數:色標位置和css顏色值。色標位置是一個0(開始的顏色)到1(結束的顏色)之間的數字
表示從一個畫布上的點(30, 30)到點(70, 70)的漸變。起點的色標是白色,終點的色標是黑色。然後可以把fillStyle或者strokeStyle設置為這個對象,從而使用漸變來繪制形狀或描邊
要創建徑向漸變,可以使用createRadialGradient()方法,接受6個參數,對應著兩個圓的圓心和半徑
模式其實就是重復的圖像,可以用來填充或描邊圖像,使用createPattern()方法並傳入兩個參數:一個<img>元素和一個表示如何重復圖像的字元串。其中第二個參數的值與css的background-repeat屬性值相同,包括「repeat」、「repeat-x」、「repeat-y」和「no-repeat」
模式與漸變一樣,都是從畫布的原點(0, 0)開始的,將填充樣式設置為模式對象,只表示在某個特定的區域內顯示重復的圖像,而不是要從某個位置開始繪制重復圖像
上下文可以通過getImageData(x, y, width, height)取得原始圖像數據
這里返回的對象是ImageData的實例,每個ImageData對象都有三個屬性:width、height和data。其中data是一個數組,保存著圖像中每一個像素的數據。
在data數組中,每一個像素用4個元素來保存,分別表示紅、綠、藍和透明度。因此第一個像素的數據保存在數組的第0到第3個元素中,數組中的每個元素的值都介於0到255之間(包括0和255)
putImageData()方法可以將imageData表示的圖像繪制到畫布上
globalAlpha:用於指定所有繪制的透明度,是一個介於0到1之間的值,默認值為1
如果所有的後續操作都要基於相同的透明度,可以先把globalAlpha設置為適當的值,然後繪制
globalCompositionOperation:表示後繪制的圖形怎樣與先繪制的圖形結合,可能的值如下
G. canvas前端動圖如何實現
Canvas是HTML5中的重要組成部分,用於繪制簡單的圖形,定義路徑,創建漸變及應用圖像變換,如何用Canvas製作動畫也是很多人都有的疑問。
01
什麼是動畫?我們在繪制動畫之前必須要弄清楚什麼是動畫,一個動畫最起碼需要哪些基本條件呢?我們可以用一個工具展示動畫是什麼。這是利用PPT繪制出的一個動畫效果
這樣我們就通過Canvas做出一個簡單的動態圖形了
如果你想要學習更多的新知識
如果你想要分享自己的心得
如果你熱愛前端渴望提升