这里是视图函数：
view : Model -> Html Msg
view model =
div [ class "content" ]
[ h1 [] [ text "Islamic art patterns" ]
, button
[ class "button"
, onClick ClickedSurpriseMe
]
[ text "SurpriseMe!" ]
, div [ class "filters" ]
[ viewFilter SlidHue "Hue" model.hue
, viewFilter SlidRipple "Ripple" model.ripple
, viewFilter SlidNoise "Noise" model.noise
]
, h3 [] [ text "Thumbnail Size:" ]
, div [ id "choose-size" ] <|
List.map viewSizeChooser [ Small, Medium, Large ]
, div [ id "thumbnails", class (sizeToString model.chosenSize) ] <|
List.map (viewPhoto model.selectedUrl) model.photos
, img
[ id "main-canvas"
, class "large"
, src model.selectedUrl
, onClick Tessellate
, title "Click for Tessellate on/off!"
]
[]
]我正在使用的端口：
port setFilters : FilterOptions -> Cmd msg
type alias FilterOptions =
{ url : String
, filters : List { name : String, amount : Int }
}img和canvas的index.html中的css代码，以及大型类：
img,canvas {border: 3px solid white; margin: 5px; }
.large {width:600px; float: right; cursor: pointer; }和index.html中的JavaScript代码：
<script>
class RangeSlider extends HTMLElement {
connectedCallback() {
var input = document.createElement ("input");
this.appendChild(input);
var jsr = new JSR(input, {
max: this.max,
values: [this.val],
sliders: 1,
grid: false
});
var rangeSliderNode = this;
jsr.addEventListener("update", function(elem, value) {
var event = new CustomEvent("slide", {
detail: {userSlidTo: value}
});
rangeSliderNode.dispatchEvent(event);
});
}
window.customElements.define("range-slider", RangeSlider);
</script>
</head>
<body>
<div id="app"></div>
<script src ="http://elm-in-action.com/pasta.js"></script>
<script src="app.js"></script>
<script>
var app = Elm.MyPage.init({node: document.getElementById("app")});
app.ports.setFilters.subscribe(function(options) {
requestAnimationFrame(function() {
Pasta.apply(document.getElementById("main-canvas"), options);
});
});
</script>图像过滤库需要使用画布（“main-canvas”），但是每当我编辑img函数以在视图中使用画布时，我都会得到一个空的矩形，如下面两张图片所示，在使用img之前和使用canvas之后：
（https://i.stack.imgur.com/7bsok.png）（英文）
（https://i.stack.imgur.com/uEJsY.png）
我仔细检查了画布的渲染部分可能会出什么问题，无法找到解决方案。
1条答案
按热度按时间ie3xauqp1#
我不知道pasta函数到底是做什么的。如果它绘制给定的图像（可能还改变画布大小以匹配图像大小）并应用过滤器，那么我的评论就没有帮助了。
不幸的是，在
<canvas>元素上设置src属性并不会向其绘制图像。我认为你需要添加另一个
port来绘制图像，只要使用CanvasAPIdrawImage function选择了一个图像。然后你可以在上面应用过滤器。canvas元素的另一个怪癖是，每当它的大小改变时，它的内容就会被清除。
也许这也会让你犯错。