原生js实现吸取图片颜色

最新推荐文章于 2024-07-31 15:56:35 发布

Oranges_Ge

最新推荐文章于 2024-07-31 15:56:35 发布

阅读量3.1k

点赞数

分类专栏：前端 js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44743929/article/details/107024707

版权

该博客介绍了如何使用原生JavaScript通过canvas元素来吸取图片颜色。内容包括从图片URL和上传图片两种方式实现颜色吸取，并详细讲解了如何获取RGBa和16进制颜色值。还提供了相关的HTML和CSS实现。

摘要由CSDN通过智能技术生成

吸取图片颜色

利用canvas实现颜色的吸取和图片展示
可以根据图片的url
可以上传本地图片

通过图片的url实现颜色吸取

	var getUrl = document.querySelector('.getUrl')
    var submit = document.querySelector('.submit')

    onLoad()

    submit.addEventListener('click', function () {
   
        onLoad()
    })

    function onLoad() {
   
        var image = new Image()

        image.src = getUrl.value || "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1716737588,2183221507&fm=26&gp=0.jpg"
        image.crossOrigin = "anonymous"

        image.onload = function () {
   
            var canvas = document.getElementById('canvas');
            var testBag = document.querySelector('.test')

            var maxVal = getRgba(canvas, this)

            var splitArr = maxVal.split(",")
            var hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))

            testBag.style.backgroundColor = '#' + hex
        }
    }

通过上传图片的方式吸取颜色

    var oFile = document.querySelector('.file')
    var bagColor = document.querySelector('.bagColor')
    var canvasss = document.querySelector('.canvas')

    oFile.addEventListener("change", function (e) {
   
        var img = e.target.files[0];

        //检查能否读取图片
        if (