CSS/JS：我如何複製邊緣像素並重復它們

我有一個960px橫幅（帶有多個幻燈片），並且根據客戶端的請求，它應該填充整個窗口寬度，但不能縮放。他們提到「像素複製」，但我還沒有發現任何東西。CSS/JS：我如何複製邊緣像素並重復它們

我必須讓橫幅邊緣（最後1px）重複以適應寬度;最後左邊的像素應該重複到左側，最後一個右側的像素應該重複到右側。

我必須在HTML/CSS/JS中做到這一點，但我還沒有找到解決方案，只要打開Photoshop即可完成此操作，但客戶端可以通過後端更改橫幅，因爲我前面提到;它包含幻燈片（改變每次5秒左右..）

我的想法是這樣的：

<script> 
    var img = new Image(); 
    img.src = 'image.jpg'; 
    var context = document.getElementById('canvas').getContext('2d'); 
    context.drawImage(img, 0, 0); 
    data = context.getImageData(x, y, 960, 1).data; 
    // ... Now what? 
</script>

我發現代碼＃2，但我的問題是，不僅我不知道該怎麼得到的像素和複製它，但也從橫幅的頂部到底部的每個像素需要重複

有什麼建議嗎？

來源

2014-03-24 Lasse Rafn

考慮使用此方法，使用數據的URL：https://stackoverflow.com/a/9971339/36537

基本上你從旗幟像素創建1px的寬的畫布，設置的值，並且將它轉換爲一個數據URL。將此數據網址傳遞給CSS背景圖片媒體資源。

要得到的像素值，並將其複製到新的畫布（ES），按照信息上MDN：Pixel manipulation with canvas

來源

2014-03-24 16:12:11

謝謝你這麼多，我會努力的！ –

CSS/JS：我如何複製邊緣像素並重復它們

回答

相關問題