I want to add Canvas field element using UI component admin form.
My requirement is i have a ui component form i want to add Canvas
field. check below screen shoot.
As per above screen-shoot i would like to display uploaded image in below canvas field.
How can i add <item name="formElement" xsi:type="string">canvas</item>
is this is valid method?
EDIT 1.0.0
I got success to add canvas by using below references.
Below is my code.
Namespace/Modulename/view/adminhtml/ui_component/sampleimageuploader_image_form.xml
<field name="image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">image</item>
<item name="label" xsi:type="string" translate="true">Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="previewTmpl" xsi:type="string">Namespace_Modulename/image-preview</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="sampleimageuploader/image/upload/field/image"/>
</item>
</item>
</argument>
</field>
<!-- This field has data type 'text'
and override standard 'input' form element's tempate and constructor by custom ones -->
<field name="color">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<!--component constructor-->
<item name="component" xsi:type="string">Namespace_Modulename/js/form/element/color-select</item>
<!--main template for form field that renders elementTmpl as a child template-->
<item name="template" xsi:type="string">ui/form/field</item>
<!--customized form element template that will show colors-->
<item name="elementTmpl" xsi:type="string">Namespace_Modulename/form/element/color-select</item>
<item name="label" xsi:type="string">Autumn colors</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">sampleimageuploader</item>
</item>
</argument>
</field>
</fieldset>
Namespace/ModuleName/view/adminhtml/web/js/form/element/color-select.js
define([
'Magento_Ui/js/form/element/abstract'
],function(Abstract) {
return Abstract.extend({
defaults: {
// How can i get image here>
});
});
Namespace/Modulename/view/adminhtml/web/template/form/element/color-select.html
<input type="hidden" id="placeholder_img" value="">
<div class="canvas-container" style="width: 500px;height: 500px;position: relative;user-select: none;">
<canvas id="canvas" width="500" height="500" style="border: 1px solid rgb(170, 170, 170);background-color: #E9EEF1;position: absolute;width: 500px;height: 500px;left: 0px;top: 0px;touch-action: none;user-select: none;" class="lower-canvas"></canvas>
</div>
Now i want uploaded image value in color-select.js
or color-select.html
.
How can i achieve this thing.
Any help would be appreciated!