相关疑难解决方法(0)

来自HTML Canvas的getPixel？

是否可以查询HTML Canvas对象以获取特定位置的颜色？

html javascript canvas

Lia*_*iam

lucky-day

104
推荐指数

7
解决办法

12万
查看次数

如何将图像上传到HTML5画布

我目前正在使用http://paperjs.org来创建HTML5画布绘图应用程序.我想让用户将图片上传到画布.我知道我需要进行登录和注册,但有更简单的方法吗？我看过HTML5拖放上传.

javascript html5

use*_*026

2012 11-22

52
推荐指数

2
解决办法

7万
查看次数

Firefox中的event.offsetX

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousemove", function(e){
        if (!e) e = window.event;
        var ctx = canvas.getContext("2d");

        var x = e.offsetX;
        var y = e.offsetY;

        ctx.fillRect(x, y, 1, 1);
    });
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
    <canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请考虑以上快速而肮脏的例子.请注意我的画布包含一个应用了比例变换的div.以上代码适用于任何基于webkit的浏览器.移动鼠标时,它会在画布上绘制点.不幸的是,它不在Firefox中,因为它的事件模型不支持offsetX/Y属性.如何将(也许)event.clientX(在firefox中也支持)中的鼠标坐标转换为画布相对坐标,同时考虑画布位置,变换等？谢谢,卢卡.

javascript firefox events html5 html5-canvas

lvi*_*ani

2019 01-16

47
推荐指数

5
解决办法

4万
查看次数

如何在用户点击图像时使用JavaScript或jQuery读取图像的像素？

当用户点击图像时,如何使用JavaScript或jQuery读取图像像素的颜色？(当然,我们通过订阅click事件得到了这个像素的(x,y)值).

javascript jquery

作者

2016 02-09

38
推荐指数

2
解决办法

4万
查看次数

从图像中获取像素颜色

我在浏览器上有一个图像.

我想得到图像颜色的左上角像素(坐标为:0,0),无论图像是否旋转.

我怎么能这样做,使用JavaScript或PHP代码？

javascript image pixel

Eit*_*tan

2013 07-22

20
推荐指数

2
解决办法

4万
查看次数

仅通过透明部分上传图像

遮罩图像下面有3个部分：

1.外部不透明部分

2.边界

3.内侧透明部分

现在，当用户单击“透明”或“不透明”部分时，我允许用户上传图像。

要求：

当用户点击非透明部分，不是它不应该显示dailogue框中上传图片....

这是https://codepen.io/kidsdial/pen/jJBVON

var mask;

let jsonData = {
    "path": " love shape\/",
    "info": {
        "author": "",
        "keywords": "",
        "file": "love shape",
        "date": "sRGB",
        "title": "",
        "description": "Normal",
        "generator": "Export Kit v1.2.8"
    },
    "name": "love shape",
    "layers": [{
        "x": 1,
        "height": 613,
        "layers": [{
                "x": 1,
                "color": "0xFFFFFF",
                "height": 612,
                "y": 30,
                "width": 612,
                "shapeType": "rectangle",
                "type": "shape",
                "name": "bg_rectangle_1"
            },
            {
                "x": 40,
                "height": 480,
                "layers": [{
                        "x": 10,
                        "height": …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery html5 css3

作者

2019 03-08

10
推荐指数

1
解决办法

255
查看次数

悬停并单击CSS三角形

我有一个带有javascript函数的三角形可以移动该图像.

问题是该元素具有方形形状,因此在三角形之外触发点击和悬停状态(参见下图中的红色部分):

带有错误悬停和点击区域的CSS三角形

如何防止悬停并在三角形外部单击并仅允许在三角形内部单击/悬停状态？

css geometry svg css3 css-shapes

gn6*_*n66

2016 10-10

8
推荐指数

2
解决办法

1万
查看次数

HTML5 Canvas - 如何从线性化图像数据 Uint8ClampedArray 中获取相邻像素位置？

一个 5 x 5 像素的图像数据在线性化图像数据数组中是这样的 -

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240, 0, 0 , 0, 255 , 0, 0, 0, 240, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …

html javascript canvas

yem*_*mon

2017 08-30

3
推荐指数

1
解决办法

830
查看次数