Загрузка изображения через форму в electron? 100 просмотров ни одного ответа.?

Question

Igogogor @Igogogor

JavaScript

Загрузка изображения через форму в electron? 100 просмотров ни одного ответа.?

Приложение Electron анализирует текстуру и отрисовывает изображение, которое должно загружаться как на сайтах через форму
По какой-то причине загрузка не происходит

document.getElementById("download").addEventListener("click", download);
let link = document.createElement("a");
link.download = `${code.value}.png`;
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

ctx.save();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.restore();

webSecurity: false в BrowserWindow поставил

Вопрос задан более трёх лет назад
287 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Роман @lastuniverse

Серверной части вы конечно же нам не покажете?

Написано более трёх лет назад
Igogogor @Igogogor Автор вопроса

Роман, package.json?

Написано более трёх лет назад

Igogogor @Igogogor Автор вопроса

Роман,
package.json:

{
  "name": "texturator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron . --allow-file-access-from-files"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.1.0"
  }
}

index.js:

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow} = electron;

let mainWindow;


// listenerfor app
app.on('ready', function(){
mainWindow = new BrowserWindow({
	  frame: false,
	  height: 563,
      useContentSize: true,
      width: 1000,
      "webPreferences": {
      "webSecurity": false
    }
});
mainWindow.maximize();
mainWindow.setMenu(null);
_dirname = path.resolve();
mainWindow.loadURL(url.format({
	pathname: path.join(_dirname, 'mainWindow.html'), 
	protocol:'file',
	slashes:true
}));    
});

mainwindow.html:

<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div class="left">	<section>
	<form>
		<label for="image"></label>
		<input type="file" id="image" />
    </section>
	<canvas width="320" height="320" id="canvas" />
	<img id="logoImg" src=""
</div>
<div class="right">



    <script type="text/javascript">


const imageFile = document.getElementById("image");
const code = document.getElementById("code");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();


window.onload = () => {
	render();
};


document.getElementById("download").addEventListener("click", download);
imageFile.addEventListener("change", handleImage);


function handleImage(e) {
	img.src = URL.createObjectURL(e.target.files[0]);
	img.onload = () => {
		render();
	};
}


function render() {
	drawImage();
	drawBackground();
}

function drawImage() {
	ctx.save();
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	ctx.restore();
}


function drawBackground() {
}

function drawText(text, position) {
	ctx.fillStyle = "white";
	ctx.font = "17px Courier";

	const top = [
		{ text: `A` },
		{ text: ` ${code.value}`, font: `bolder ${ctx.font}`, fillStyle: color.value },
		{ text: `,` }
	];

	const bottom = [
		{ text: `has` },
		{
			text: ` ${percent.value} `.toUpperCase(),
			font: `bolder ${ctx.font}`,
			fillStyle: color.value
		},
		{ text: `different faces.` }
	];

	fillMixedText(ctx, text === "top" ? top : bottom, 15, position);
}

function fillMixedText(ctx, args, x, y) {
	let defaultFillStyle = ctx.fillStyle;
	let defaultFont = ctx.font;

	ctx.save();
	args.forEach(({ text, fillStyle, font }) => {
		ctx.fillStyle = fillStyle || defaultFillStyle;
		ctx.font = font || defaultFont;

		ctx.fillText(text, x, y);
		x += ctx.measureText(text).width;
	});
	ctx.restore();
}

function download() {
	let link = document.createElement("a");
	link.download = `${code.value}.png`;
	link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        let logo = nativeImage.createFromPath(link.href);
        ctx.save();
	ctx.drawImage(logo, 0, 0, canvas.width, canvas.height);
	ctx.restore();
	document.getElementById('logoImg').src=link;
	link.click();
// два способа
}

function texturator() {
img.onload = function() {
   let imgwid = this.width;
   let imghei = this.height;
}
for (var i = 0; i = imgwid; i++) {
for (var j = 0; j = imghei; j++) {
	var pix = ctx.getImageData(imgwid, imghei, 1, 1).data; 
    if((pix[0] == 0) && (pix[1] == 0) && (pix[2] == 0) && (pix[3] == 0)){
 				coord += " (Transparent color detected, cannot be converted to HEX)";
    }
    var hex[] = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

}	
}
}

</script>
</div>
</body>
</html>

Написано более трёх лет назад

Роман @lastuniverse

Igogogor, к сожалегию не подскажу. Вы в качестве бэка используете нативный для электрона модуль, я же использовал обычный express. Как решить проблему в экспрессеия знаю а вот в нативном доя электрона модуле нет.

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 1 подписчик
- 2 часа назад
- 27 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как поменять маску с 9 цифр до 10 цифр?
- 1 подписчик
- 4 часа назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- 4 часа назад
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как изменить маску ввода для Тайланда?
- 1 подписчик
- 5 часов назад
- 105 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- 17 часов назад
- 36 просмотров
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 19 часов назад
- 95 просмотров
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- 20 часов назад
- 60 просмотров
1

ответ
JavaScript

Простой
Как инициировать скрипт при определенной ширине экрана?
- 1 подписчик
- 23 часа назад
- 54 просмотра
1

ответ
JavaScript

Простой
Как задать тригер onchange при изменении value?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
JavaScript

Средний
Как можно менять ::backdrop через JS?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Разработка Телеграм Бота

28 нояб. 2024, в 17:46

10000 руб./за проект

Верстка на wordpress по макету в figma

28 нояб. 2024, в 17:38

12000 руб./за проект

Установить цель из метрики javascript событие на вордпресс

28 нояб. 2024, в 17:06

300 руб./за проект

Серверной части вы конечно же нам не покажете?
Igogogor, к сожалегию не подскажу. Вы в качестве бэка используете нативный для электрона модуль, я же использовал обычный express. Как решить проблему в экспрессеия знаю а вот в нативном доя электрона модуле нет.

Answer 1 · 2020-03-09 16:56:20

<label>Image File:</label><br/>
    <input type="file" id="imageLoader" name="imageLoader"/>
    <canvas id="imageCanvas"></canvas>

    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');

    function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
    }

Загрузка изображения через форму в electron? 100 просмотров ни одного ответа.?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт