最近在學習canvas，然後照葫蘆畫瓢簡單實現了幾個小demo，跟大家一塊學習一下。
用法：
context.drawimage(img[, sx, sy, swidth, sheight], x, y[, width, height]);
複製**
描述img
sx可選。開始剪下的 x 座標位置。
sy可選。開始剪下的 y 座標位置。
swidth
可選。被剪下影象的寬度。
sheight
可選。被剪下影象的高度。
x在畫布上放置影象的 x 座標位置。
y在畫布上放置影象的 y 座標位置。
width
可選。要使用的影象的寬度。（伸展或縮小影象）
height
可選。要使用的影象的高度。（伸展或縮小影象）
用法：
context.getimagedata(x, y, width, height);
複製**
開始複製的左上角位置的 x 座標。
y開始複製的左上角位置的 y 座標。
width
將要複製的矩形區域的寬度。
height
將要複製的矩形區域的高度。
方法返回 imagedata 物件，該物件拷貝了畫布指定矩形的畫素資料。 是uint8clampedarray型別的一維陣列，包含著rgba格式的整型資料。 對於 imagedata 物件中的每個畫素，都存在著四方面的資訊，即rgba值:
color/alpha 以陣列形式存在，並儲存於 imagedata 物件的 data 屬性中。
這個樣子：
先來一下demo，通過getimagedata方法獲取滑鼠指標處的畫素值。
部分**：
methods:
}, methods:
}, mounted () ;
this.canvas.onmousemove = () => }}
複製**
第乙個問題之前有寫過一篇文章，可以看這裡，這裡不贅述了。
注意 第二個問題源於canvas無法對沒有許可權的跨域進行操作，如出現跨域，對的操作(如getimagedata、canvas.todataurl)會報錯：uncaught domexception: failed to execute 'getimagedata' on 'canvasrenderingcontext2d': the canvas has been tainted by cross-origin data. 即canvas已經被跨域的資料汙染了。
要解決這個問題，就需要所在的伺服器允許跨域訪問(設定訊息頭access-control-allow-origin="*"或者你的**網域名稱)，且本地也需要開啟跨域許可權(img.crossorigin = "anonymous")。
由於一般的伺服器都是允許跨域的，所以前端只要設定img.crossorigin = "anonymous"就可以了。
當然，如果伺服器設定了防盜煉的話，我們本地開啟了跨域許可權也是沒有用的。部分**：
data ()
},methods: ,
onfilechange (e) ;
}, draw (img) ,
onconfirmurl () ;
}},mounted ()
}複製**
這個效果的實現相當簡單，只是直接利用了drawimage的「擷取」功能，把左側擷取的50 * 50的畫布放大後，重新畫在了新的畫布上。
部分**：
const sample_width = 50,
canvas_widht = 300;
export
default
}, methods:
if(x > canvas_widht - sample_width / 2)
if(y < sample_width / 2)
if(y > canvas_widht - sample_width / 2)
let x1 = x - sample_width / 2,
y1 = y - sample_width / 2;
this.drawcanvas(this.img);
this.showmagnifier(x1, y1);
this.drawsampleframe(x1, y1);
},drawsampleframe (x1, y1) ,
onfilechange (e) ;
},drawcanvas (img) ,
onconfirmurl () ;
},showmagnifier (x, y)
}, mounted ()
this.canvas.onmouseout = () => }}
複製**
OpenCv畫素點獲取與修改
1 matlab獲取彩色影象畫素值的方法 三通道排序分別對應彩色影象的rgb三通道 2 opencv中獲取影象畫素的方法 方法一 注意記憶體中儲存順序是bgr 方法二 for int i 0 i img height i 假設灰度影象image，訪問其i行j列的象素可以這樣 cv image ele...
openCV畫素點處理
獲得畫素點的值便可以更加靈活的進行影象處理，在opencv裡可以通過cvget2d 和cvset2d 兩個函式加上乙個cvscalar結構體做到。opencv中，cvscalar結構為 typedef struct cvscalar cvscalar 4個double型變數，演算法處理時不至於被強制...
GetPixel 取畫素點
函式原型 colorref getpixel hdc hdc,int nxpos,int nypos 引數 hdc 裝置環境控制代碼。nxpos 指定要檢查的畫素點的邏輯x軸座標。nypos 指定要檢查的畫素點的邏輯y軸座標。返回值 返回值是該象像點的rgb值。如果指定的畫素點在當前剪輯區之外 那麼...